Question

..我正在计算已选中复选框的数量，当达到最大数量时，我需要确保不允许选择其他复选框。

像这样....

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语句时检查复选框？

Answer 1

要禁止选中复选框，正确的方法是设置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;
    }
});

也就是说，这可能会为您的用户带来令人难以置信的恼人用户界面，因此复选框似乎已启用，但无法检查。

Answer 2

2014更新如下：

请注意，应使用（对于jQuery版本＆gt; 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

原始答案：

这是你的想法吗？（工作示例，只需剪切/粘贴并尝试）

修订：working 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>

Javascript / jQuery - 单击时删除复选框值

2 个答案: