限制复选框,并在更改标签后取消选中
问题描述:
我试图用选择标签显示和隐藏div。在div中有复选框,它具有在用户选中后禁用它们的逻辑2.当我更改div时,复选框保持禁用状态。出于某种原因,最大2复选框逻辑禁用所有复选框。限制复选框,并在更改标签后取消选中
这里是小提琴
http://jsfiddle.net/sghoush1/yJCYW/
jQuery的看起来有点像这个
$('.selectOption').change(function(){
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
var max = 2;
var checkboxes = $('input[type="checkbox"]');
checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
if(current >= max){
$('.resourceMsg').show();
} else{
$('.resourceMsg').hide();
}
});
答
只需取消选中的复选框,设置残疾人属性设置为false时选择元素被改变:
$(function() {
var max = 2;
var checkboxes = $('input[type="checkbox"]');
$('.selectOption').change(function() {
checkboxes.prop({
'disabled': false,
'checked': false
});
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
checkboxes.change(function() {
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
if (current >= max) {
$('.resourceMsg').show();
} else {
$('.resourceMsg').hide();
}
});
});
+0
谢谢,没有这样想过。感谢您指出 – soum 2013-04-09 03:03:37
答
你没有代码来启用它们。
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
这将在页面上禁用所有选中复选框,并不仅仅是那些在当前显示的div
。
您需要重新考虑选择更改后应该发生的情况;您可能需要扔掉现有的选择或重新启用复选框(实际上是相同的东西):
$('.selectOption').change(function(){
$('.descContent').find(':checked,:disabled').prop({checked: false, disabled: false});
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
或者,你可以只禁用当前div
的复选框。
checkboxes.change(function() {
var content = $(this).parents('.descContent');
var current = content.find(':checked').length;
content.find(':not(:checked)').prop('disabled', current >= max);
// ...
}
他们可以为每个选择选项选择两个吗? – user1048676 2013-04-09 02:39:01