I have a code where I expect my checkboxes to be selected and disabled. When I click Zero, all checkboxes should be highlighted, all checkboxes except zeroth checkbox should be disabled. Similarly for one, two and three radio buttons. This does not seem to happen consistently. I am trying it on chrome browser version 48.0.2564.116. Also, the behavior is horrible on Firefox. Can someone please let me know what I am doing wrong?
我有一个代码,我希望我的复选框被选中和禁用。当我单击0时,所有复选框都应该突出显示,除零之外的所有复选框都应该被禁用。1、2、3个单选按钮也是如此。这似乎不是始终如一的。我正在chrome浏览器48.0.2564.116版本上试用。另外,Firefox的行为非常糟糕。有人能告诉我我做错了什么吗?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input[name=radio_group]").prop("checked", false);
$("input[type=radio]").click( function( e ){
var whats_selected = $("input[name=radio_group]:checked").val()
$("input[type=checkbox]").attr('checked',false );
//disable all other checkboxes
for(i=0; i < 4; i++ ){
var elem = $("input[type=checkbox][name*=checkbox"+i+"]");
elem.click();
if( i != whats_selected ){
elem.prop("disabled", true);
}else{
elem.removeAttr("disabled");
}
}
});
});
</script>
</head>
<body>
<h1>Checkbox play</h1>
<h3>My 4 Radio Buttons</h3>
<input type="radio" name='radio_group' value=0>Zero<br>
<input type="radio" name='radio_group' value=1>One<br>
<input type="radio" name='radio_group' value=2>Two<br>
<input type="radio" name='radio_group' value=3>Three<br>
<p>And here are my checkboxes</p>
<input type='checkbox' id="chkbox0" name="checkbox0" value="checkbox0">Checkbox Zero<br>
<input type='checkbox' id="chkbox1" name="checkbox1" value="checkbox1">Checkbox One<br>
<input type='checkbox' id="chkbox2" name="checkbox2" value="checkbox2">Checkbox Two<br>
<input type='checkbox' id="chkbox3" name="checkbox3" value="checkbox3">Checkbox Three<br>
</body>
</html>
2 个解决方案
#1
2
I think this should do the trick (if I get your question correctly)
我想这应该能起到作用(如果我答对了你的问题)
$("input[type=radio]").click(function(e) {
var whats_selected = $(this).val();
// check an disable all checboxes
$("input[type=checkbox]")
.attr('checked', true)
.prop('disabled', true);
// enable the targetted checkbox
$('#chkbox' + whats_selected)
.prop('disabled', false);
});
Have a look at the demo: https://jsfiddle.net/a5og0soL/
看看这个演示:https://jsfiddle.net/a5og0soL/
#2
1
Here is another way to do it, matching the index of the radio/checkbox pair:
下面是另一种方法,匹配单选/复选框对的索引:
jsFiddle演示
var ndx;
$(document).ready(function() {
$("input[type=radio]").click(function() {
ndx = $("input[type=radio]").index(this);
$("input[type=checkbox]").attr('checked', true).prop('disabled', true);
$("input[type=checkbox]").eq(ndx).prop('disabled',false);
});
}); //END document.ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>My 4 Radio Buttons</h3>
<input type="radio" name='radio_group' value=0>Zero
<br>
<input type="radio" name='radio_group' value=1>One
<br>
<input type="radio" name='radio_group' value=2>Two
<br>
<input type="radio" name='radio_group' value=3>Three
<br>
<p>And here are my checkboxes</p>
<input type='checkbox' id="chkbox0" name="checkbox0" value="checkbox0">Checkbox Zero
<br>
<input type='checkbox' id="chkbox1" name="checkbox1" value="checkbox1">Checkbox One
<br>
<input type='checkbox' id="chkbox2" name="checkbox2" value="checkbox2">Checkbox Two
<br>
<input type='checkbox' id="chkbox3" name="checkbox3" value="checkbox3">Checkbox Three
<br>
#1
2
I think this should do the trick (if I get your question correctly)
我想这应该能起到作用(如果我答对了你的问题)
$("input[type=radio]").click(function(e) {
var whats_selected = $(this).val();
// check an disable all checboxes
$("input[type=checkbox]")
.attr('checked', true)
.prop('disabled', true);
// enable the targetted checkbox
$('#chkbox' + whats_selected)
.prop('disabled', false);
});
Have a look at the demo: https://jsfiddle.net/a5og0soL/
看看这个演示:https://jsfiddle.net/a5og0soL/
#2
1
Here is another way to do it, matching the index of the radio/checkbox pair:
下面是另一种方法,匹配单选/复选框对的索引:
jsFiddle演示
var ndx;
$(document).ready(function() {
$("input[type=radio]").click(function() {
ndx = $("input[type=radio]").index(this);
$("input[type=checkbox]").attr('checked', true).prop('disabled', true);
$("input[type=checkbox]").eq(ndx).prop('disabled',false);
});
}); //END document.ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>My 4 Radio Buttons</h3>
<input type="radio" name='radio_group' value=0>Zero
<br>
<input type="radio" name='radio_group' value=1>One
<br>
<input type="radio" name='radio_group' value=2>Two
<br>
<input type="radio" name='radio_group' value=3>Three
<br>
<p>And here are my checkboxes</p>
<input type='checkbox' id="chkbox0" name="checkbox0" value="checkbox0">Checkbox Zero
<br>
<input type='checkbox' id="chkbox1" name="checkbox1" value="checkbox1">Checkbox One
<br>
<input type='checkbox' id="chkbox2" name="checkbox2" value="checkbox2">Checkbox Two
<br>
<input type='checkbox' id="chkbox3" name="checkbox3" value="checkbox3">Checkbox Three
<br>