Jquery 如果选中复选框禁用其他复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18576797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery If a checkbox is checked disable other checkboxes
提问by watkib
I have a group of php generated checkboxes :
我有一组 php 生成的复选框：
<?php foreach($checkbox as $check) {?>
<input type = "checkbox" name="checkbox[]" class="<?php echo $check -> class ?>" value ="<?php echo $check -> value ?>" /><?php echo $check->value ?>
<?php } ?>
Above PHP generates HTML below:
上面的PHP生成下面的HTML：
<input type="checkbox" name="checkbox[]" class="class1" value="Checkbox1" />Checkbox1
<input type="checkbox" name="checkbox[]" class="class1" value="Checkbox2" />Checkbox2
<input type="checkbox" name="checkbox[]" class="class1" value="Checkbox3" />Checkbox3
<input type="checkbox" name="checkbox[]" class="class2" value="Checkbox4" />Checkbox4
<input type="checkbox" name="checkbox[]" class="class2" value="Checkbox5" />Checkbox5
<input type="checkbox" name="checkbox[]" class="class2" value="Checkbox6" />Checkbox6
<input type="checkbox" name="checkbox[]" class="class3" value="Checkbox7" />Checkbox7
<input type="checkbox" name="checkbox[]" class="class3" value="Checkbox8" />Checkbox8
To explain above, I have three classes of checkboxes, and would like that:
为了解释上面的内容，我有三类复选框，并且希望这样：
If I check any in class1, class3becomes disabled, if I uncheck, class3is back enabled.
If I check class2, all of the other class2become disabled, class1remains checked if already checked, becomes checked if not.
如果我签入任何class1，class3将被禁用，如果我取消选中，class3则重新启用。如果我选中class2，则其他所有都class2被禁用，class1如果已经选中则保持选中状态，如果没有选中则变为选中状态。
I have tried doing this, using the Script below.
我试过这样做，使用下面的脚本。
$('input[class*="class"]').click(function(){
if($(this).is(':checked')){
var classValue = $(this).attr('class');
if(classValue == 'class1'){
$('.class3').prop('disabled', true);
$('.class3').prop('checked', false);
}
else if(classValue == 'class2'){
$('.class2').not(':checked').prop('disabled', true);
$('.class3').prop('disabled', true);
}
else if(classValue == 'class3'){
$('.class1').prop('checked', false);
$('.class2').prop('checked', false);
$('.class1, .class2').prop('disabled', true);
}
}
})
Doesn't work though.
虽然不起作用。
回答by Barmar
$('input[class^="class"]').click(function() {
var $this = $(this);
if ($this.is(".class1")) {
if ($(".class1:checked").length > 0) {
$(".class3").prop({ disabled: true, checked: false });
} else {
$(".class3").prop("disabled", false);
}
} else if ($this.is(".class2")) {
if ($this.is(":checked")) {
$(".class2").not($this).prop({ disabled: true, checked: false });
$(".class1").prop("checked", true);
} else {
$(".class2").prop("disabled", false);
}
}
});
回答by Dart
Try this http://jsfiddle.net/EACk4/
试试这个http://jsfiddle.net/EACk4/
$(document).ready(function(){
$('.class1').on('change', function(){
if($('.class1:checked').length){
//or $('.class3').prop({disabled: 'disabled', checked: false});
$('.class3').prop('disabled', true);
$('.class3').prop('checked', false);
return;
}
$('.class3').prop('disabled', false);
});
$('.class2').on('change', function(){
if(!$(this).prop('checked')){
$('.class2').prop('disabled', false);
return;
}
$('.class2').prop('disabled', true);
$(this).prop('disabled', false);
!$('.class1:checked').length ? $('.class1').click() : '';
});
})
回答by philosofis
I modified your code a bit -- I think it accomplishes what you wanted.
我稍微修改了你的代码——我认为它完成了你想要的。
$('input[class*="class"]').click(function(){
var classValue = $(this).attr('class')
,isChecked = $(this).is(':checked');
if(classValue == 'class1'){
if( !isChecked && $('.' + classValue + ':checked').length > 0 ) {
return;
}
$('.class3').prop('disabled', isChecked ? true : false);
$('.class3').prop('checked', isChecked ? false : null);
}
else if(classValue == 'class2'){
if( isChecked && $('.class1 :checked').length <= 0 ){
$('.class1').prop('checked', true);
}
$('.class2').not(':checked').prop('disabled', isChecked ? true : false);
$('.class3').prop('disabled', isChecked ? true : false);
}
else if(classValue == 'class3'){
$('.class1, .class2').prop('checked', isChecked ? false : null);
$('.class1, .class2').prop('disabled', isChecked ? true : false);
}
})
})
