javascript - 复选框被禁用，jquery 无法按预期工作

Question

我有一些复选框，通过在代表餐厅餐 table 的数据库中进行选择来显示。那些已经保留的表我为它们添加了禁用属性。我的脚本的问题是我只想最多选择三个表，这意味着我需要向另一个表添加禁用属性以阻止它们。当我想取消选择那些已选择的 3 个时，我需要删除禁用的属性。问题是它从所有表中删除该属性，甚至从数据库中保留和​​选择的表也是如此。

这是我的脚本:
JSFIDDLE HERE

    <script type="text/javascript">
      var $checks = $(".table").change(function () {
      if ($checks.filter(":checked").length<3)
      {
        $(".formular").toggle($checks.filter(":checked").length>0);
        $checks.not(":checked").removeAttr("disabled");
        }
        else
        {
        $checks.not(":checked").attr("disabled", "disabled");
        }

    });

    </script>

Answer 1

添加了一个类 .ignore 到从开始禁用的输入，并在 js 中将更改事件仅绑定(bind)到没有忽略类的复选框，如 @lolka_bolka 提到的

HTML

<input type="checkbox" class="bowling ignore" disabled/>
<input type="checkbox" class="bowling ignore" disabled/>
<input type="checkbox" class="bowling"/>
<input type="checkbox" class="bowling"/>

JS

var $checks = $(".bowling:not(.ignore)").change(function () {
    if ($checks.filter(":checked").length < 3) {
        $(".formular").toggle($checks.filter(":checked").length > 0);
        $checks.not(":checked").removeAttr("disabled");
    } else {
        $checks.not(":checked").attr("disabled", "disabled");
    }

});

:not(foo){} will match anything that isn't foo, including html and body. Source

Demo