..我正在计算已选中复选框的数量,当达到最大数量时,我需要确保不允许选择其他复选框。
像这样....IF(..some condition..)
{
// do the deed
}
ELSE
{
$('input[type="checkbox"]').on('click', function(event)
{
$(this).parent().removeClass("c1-item-selected"); // removing CSS
$(this).parent().val=""; // hoping to remove value "checked"
});
}
我尝试将 $(this).parent()。val =“”; 替换为: event.preventDefault(); event.stopPropagation(); 但它不是正确的方法选择。它仍然允许我检查任何盒子,实际上阻止我之后取消选中它。所以我认为我只需将任何单击复选框的值设置为null或(“”)并删除样式,这样看起来就不会选择任何其他复选框,但似乎没有:)
如何防止在到达ELSE语句时检查复选框?
答案 0 :(得分:3)
要禁止选中复选框,正确的方法是设置disabled
属性:
$('_select your cb').prop('disabled', true);
因此,如果我正确理解您的代码,请:
$('input[type="checkbox"]').on('click', function(event) {
$(this).parent().removeClass("c1-item-selected"); // removing CSS
$(this).parent().val=""; // hoping to remove value "checked"
});
应该只是
$('input[type="checkbox"]').prop('disabled', true);
修改
根据您的评论,您似乎希望启用复选框,但用户无法检查任何其他复选框。您最好的选择是维护一个简单的布尔跟踪,以确定用户是否可以检查其他内容,并执行以下操作:
var canCheckNew = false;
//gets set somehow
$('input[type="checkbox"]').on('click', function(event) {
if (!canCheckNew && this.checked){
this.checked = false;
}
});
也就是说,这可能会为您的用户带来令人难以置信的恼人用户界面,因此复选框似乎已启用,但无法检查。
答案 1 :(得分:3)
2014更新如下:
请注意,应使用(对于jQuery版本> 1.6) prop()
而不是attr()
- 请参阅:
Disable/enable an input with jQuery?
.prop() vs .attr()
因此,在下面的例子中:
if (checked > 2) {
$("input:checkbox:not(:checked)").prop('disabled',true);
}else{
$('input[type=checkbox]').prop('disabled',false);
}
更新的JSFIDDLE:jsFiddle
原始答案:
这是你的想法吗? (工作示例,只需剪切/粘贴并尝试)
如果选中3个复选框,此修订后的代码将禁用所有未选中的复选框。如果取消选中一个,则会重新启用所有未选中的复选框。
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
var checked = 0;
$('input[type="checkbox"]').click(function() {
var $b = $('input[type=checkbox]');
checked = $b.filter(':checked').length;
//alert('There are [' + checked + '] checked checkboxes');
/*** SEE NOTES AT TOP: USE PROP() INSTEAD OF ATTR() ***/
if (checked > 2) {
$("input:checkbox:not(:checked)").attr('disabled','disabled');
}else{
$('input[type=checkbox]').removeAttr('disabled');
}
});
}); //END $(document).ready()
</script>
</head>
<body>
<h2>Allow up to three checkboxes to be checked, then disable all checkboxes on page</h2>
<form action="">
<input type="checkbox" name="vehicle" value="bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="car">I have a car<br>
<input type="checkbox" name="vehicle" value="spoon">I have a spoon<br>
<input type="checkbox" name="vehicle" value="guitar">I have a guitar<br>
<input type="checkbox" name="vehicle" value="boat">I have a boat<br>
<input type="checkbox" name="vehicle" value="house">I have a house<br>
</form>
</body>
</html>