1

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

像这样....

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

4

2 回答 2

3

2014 年更新如下：

请注意，应该使用（对于 jQuery 版本 > 1.6） 而不是-- 参见：prop()attr()

使用 jQuery 禁用/启用输入？
.prop() 与 .attr()

因此，在以下示例中：

                    if (checked > 2) {
                        $("input:checkbox:not(:checked)").prop('disabled',true);
                    }else{
                        $('input[type=checkbox]').prop('disabled',false);
                    }

更新的 JSFIDDLE：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>
于 2013-06-03T22:33:22.080 回答
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;
    }
});

也就是说，这可能会给您的用户带来令人难以置信的烦人UI，其中复选框似乎已启用，但无法选中。

于 2013-06-03T22:10:24.613 回答