$('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);
}
}
});
试试这个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() : '';
});
})
我稍微修改了你的代码——我认为它实现了你想要的。
$('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);
}
})
这是一个非常古老的问题,我发现很有用 - 谢谢!
我对此进行了一些修改,以实现更简单的用例...您只想拥有一个选项列表,其中一个选项取消选中并禁用所有其他选项。取消选中触发该条件的选项将重新启用其他选项
HTML 示例
Chooose one:<br />
<input type="checkbox" name="choices-1" class="n_remove" value="1" />choice 1<br />
<input type="checkbox" name="choices-2" class="n_remove" value="2" />choice 2<br />
<input type="checkbox" name="choices-3" class="n_remove" value="3" />choice 3<br />
<input type="checkbox" name="choices-1" class="n_check" value="4" />none of the above<br />
示例 JavaScript
$(document).ready(function(){
$('.n_check').click(function() {
var $this = $(this);
if ($this.is(".n_check")) {
if ($(".n_check:checked").length > 0) {
$(".n_remove").prop({ disabled: true, checked: false });
} else {
$(".n_remove").prop("disabled", false);
}
}
});
});