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

时间:2013-06-03 22:08:34

标签: javascript jquery

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

像这样....

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

2 个答案:

答案 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


原始答案:

这是你的想法吗? (工作示例,只需剪切/粘贴并尝试)

修订: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>