防止在Javascript中选中复选框

Question

我有一个 JavaScript 函数来检查复选框是否被选中。

如果是，则计算选中了多少个复选框，并检查是否达到了选中的最大数量（4）。

事情是这样的：

当我尝试选中第五个时，如何使该功能显示警报并禁用所有未选中的复选框？

即使是尝试检查为 5 的那个。

 function ChkValidate() {

          var chkDytLek = document.getElementById("ChkDytLek");
          var chkDytUSD = document.getElementById("ChkDytUSD");
          var chkDytEU = document.getElementById("ChkDytEU");
          var chkDytCAD = document.getElementById("ChkDytCAD");
          var chkDytCHF = document.getElementById("ChkDytCHF");
          var chkDytAUD = document.getElementById("ChkDytAUD");
          var chkDytGBP = document.getElementById("ChkDytGBP");

          var MaxCount = 0
          var unCheckedCount = 0

          if (chkDytLek.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {

                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1 
          }

          if (ChkDytUSD.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {
                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }  
          if (ChkDytEU.checked == true) {
              MaxCount = MaxCount + 1
              if (MaxCount == 4) {
                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }

          if (ChkDytCAD.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {
                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }

          if (ChkDytCHF.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {
                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }
          if (ChkDytGBP.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {
                  disableIfNotChecked();
              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }

          if (ChkDytAUD.checked == true) {
              MaxCount = MaxCount + 1

              if (MaxCount == 4) {
                  disableIfNotChecked();


              }
          } else {
              unCheckedCount = unCheckedCount + 1
          }

           if (unCheckedCount >= 4) {                  
              enableIfNotChecked();
           }


      }

当前代码显示警报并在计数为 4 时禁用复选框。

当我希望这发生在 5 时，但如果我改变这个：

 if (MaxCount == 4) {
                  disableIfNotChecked(); 

到：

 if (MaxCount == 5) {
                  disableIfNotChecked();

代码将禁用复选框，但也会选中被选为 5 的复选框。

知道如何解决这种情况吗？

Answer 1

我认为您需要对何时尝试选择复选框进行某种控制。

试试这个：

$('input[type="checkbox"]').on('click', function(event) {
  if(maxCount == 5) {
    event.preventDefault();
    alert('So many checkboxes');
  }    
});

这是小提琴：

http://jsfiddle.net/DrKfE/817/

Answer 2

将此添加到复选框 ChkValidate(this) 内的函数调用中

<asp:CheckBox ID="ChkDytCAD" runat="server" GroupName="Monedha" Text="CAD" CssClass="radioMarginLeft" onClick="ChkValidate(this)" ClientIDMode="Static" />

将参数添加到函数中，并在函数末尾有 4 个复选框时取消选中它

function ChkValidate(checkbox) {
    ...
    if (MaxCount > 4) {
        checkbox.checked = false;
    }
}

这是一个例子，它几乎可以满足您的需求，它只会让您一次最多检查 4 个框https://jsfiddle.net/2p069wvb/8/