Question

我有一些复选框，最多可以检查4个。如果未达到最大数量，则复选框被禁用。我想知道的是，如果我取消选中其中一个选中的复选框，限制数量4会减少，禁用的复选框将启用。是否可以使用asp复选框的任何事件，我可以用来调用java脚本函数来执行我要求的操作？这是我的复选框代码：

function ChkValidate() {
  var NewCount = 0

  if (document.getElementById("ChkDytLek").checked == true) {
    NewCount = NewCount + 1

    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')

      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }
  
  if (document.getElementById("ChkDytLek").checked == false) {
    NewCount = NewCount - 1
    alert(NewCount)
  }

  if (document.getElementById("ChkDytUSD").checked == true) {
    NewCount = NewCount + 1
    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }
  
  if (document.getElementById("ChkDytUSD").checked == false) {
    NewCount = NewCount - 1
    alert(NewCount)
  }

  if (document.getElementById("ChkDytEU").checked == true) {
    NewCount = NewCount + 1
    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }

  if (document.getElementById("ChkDytCAD").checked == true) {
    NewCount = NewCount + 1
    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }

  if (document.getElementById("ChkDytCHF").checked == true) {
    NewCount = NewCount + 1

    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }

  if (document.getElementById("ChkDytAUD").checked == true) {
    NewCount = NewCount + 1
    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }

  if (document.getElementById("ChkDytGBP").checked == true) {
    NewCount = NewCount + 1
    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }
}

<tr>
  <td style="padding-left: 10px" width="200px" colspan="1" ><b><big>Karta e Debitit te lidhet edhe me llogarite dytesore ne:</big></b></td>
  <td style="padding-left: 10px" width="70px">
    <%-- <INPUT TYPE="checkbox" NAME="dog" id="ChkDytLek" onClick="return KeepCount()"> Dog--%>
    <asp:CheckBox ID="ChkDytLek" runat="server" class="llogariDyt"
        GroupName="Monedha" Text="Lek" CssClass="radioMarginLeft"  type="check"  onClick="ChkValidate()" ClientIDMode="Static" />&nbsp;&nbsp; 
    <img src="images/eagle-clipart-albanian-7.jpg" width="24px" height="15px"/>
  </td>
  <td>                  
    <asp:CheckBox ID="ChkDytCAD" runat="server"
        GroupName="Monedha" Text="CAD" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" />&nbsp;&nbsp;
    <img src="images/CAD.png" width="24px" height="15px" />
  </td>
</tr>
<tr>
  <td> </td>
  <td style="padding-left: 10px">
    <asp:CheckBox ID="ChkDytEU" runat="server"
        GroupName="Monedha" Text="EUR" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" />&nbsp;&nbsp;
    <img src="images/eu.png"width="24px" height="15px" />
  </td>
  <td>
    <%-- <INPUT name=ChkDytCHF type=checkbox value=Charity_profile onclick="return itemClicked(3)"> CHF--%>
    <asp:CheckBox ID="ChkDytCHF" runat="server"
        GroupName="Monedha" Text="CHF" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" />&nbsp;&nbsp;
    <img src="images/CHF.png" width="24px" height="15px" />
  </td>
</tr>
<tr>
  <td> </td>
  <td style="padding-left: 10px">
    <%-- <INPUT name=ChkDytUSD type=checkbox value=Charity_profile onclick="return itemClicked(4)"> USD--%>
      <asp:CheckBox ID="ChkDytUSD" runat="server"
          GroupName="Monedha" Text="USD" CssClass="radioMarginLeft" onClick="ChkValidate()"  ClientIDMode="Static" />&nbsp;&nbsp;
      <img src="images/usa.png" width="24px" height="15px"/>
  </td>
  <td>
    <%-- <INPUT name=ChkDytAUD type=checkbox value=Charity_profile onclick="return itemClicked(5)"> AUD--%>
    <asp:CheckBox ID="ChkDytAUD" runat="server"
        GroupName="Monedha" Text="AUD" CssClass="radioMarginLeft"  onClick="ChkValidate()"  ClientIDMode="Static" />&nbsp;&nbsp;
    <img src="images/AUD.png" width="24px" height="15px"/>
  </td>
</tr>
<tr>
  <td> </td>
  <td style="padding-left: 10px;">
    <%-- <INPUT name=ChkDytGBP type=checkbox value=Charity_profile onclick="return itemClicked(6)"> GBP--%>
    <asp:CheckBox ID="ChkDytGBP" runat="server"
        GroupName="Monedha" Text="GBP" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" />&nbsp;&nbsp;
    <img src="images/GBP.png" width="24px" height="15px"/>
  </td>
</tr>

Answer 1

因此，如果我正确理解您的问题，您希望最多选中4个复选框，然后禁用其他复选框。这应该可以解决问题。

let amountChecked = 0;

function change(checkbox) {
  if (checkbox.checked) {
    amountChecked++;
  } else {
    amountChecked--;
  }

  let checkboxes = document.getElementsByClassName('check');


  if (amountChecked >= 4) {

    for (let i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
        continue;
      } else {
        checkboxes[i].disabled = true;
      }
    }
  }

  if (amountChecked < 4) {
    for (let i = 0; i < checkboxes.length; i++) {
      checkboxes[i].disabled = false;
    }
  }


}

<input class="check" type="checkbox" onchange="change(this)">
<input class="check" type="checkbox" onchange="change(this)">
<input class="check" type="checkbox" onchange="change(this)">
<input class="check" type="checkbox" onchange="change(this)">
<input class="check" type="checkbox" onchange="change(this)">
<input class="check" type="checkbox" onchange="change(this)">

为了让您充分利用这一点，我真的会尝试理解代码。这样，您就可以根据自己的需求实现自己的自定义功能。

Answer 2

您可以创建一个jQuery插件，以确定是否根据当前选中的复选框数禁用或启用复选框。

(function($) {
  $.fn.checkGroup = function(maxCheck) {
    return this.data('max-check', maxCheck).on('change', 'input[type="checkbox"]', function(e) {
      var $group = this != null ? $(this).parent().parent() : $(e.delegateTarget);
      $group.find('input[type="checkbox"]').each(function(index, child) {
        if ($group.find('input[type="checkbox"]:checked').length >= $group.data('max-check')) {
          if ($(child).prop('checked') !== true) $(child).prop('disabled', true);
        } else {
          if ($(child).prop('disabled')) $(child).prop('disabled', false);
        }
      });
    });
  };
})(jQuery);

//$('.check-group').checkGroup(4);       // <- BOTH  4 for each ?
                                         // <- ====  ==================
$('.check-group.group-a').checkGroup(2); // <- OR    2 only for group A
$('.check-group.group-b').checkGroup(3); // <- AND   3 only for group B

.check-group {
  margin-top: 1em;
  border: thin solid lightgrey;
  width: 15em;
  padding: 0.5em;
}
.check-group label {
   margin-right: 0.50em;
   font-family: monospace;
   font-size: 1.25em;
}
.check-group input {
   margin-left: 0.25em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="check-group group-a">
  <label><input type="checkbox">A</label>
  <label><input type="checkbox">B</label>
  <label><input type="checkbox">C</label>
  <label><input type="checkbox">D</label>
  <label><input type="checkbox">E</label>
  <label><input type="checkbox">F</label>
</div>
<div class="check-group group-b">
  <label><input type="checkbox">G</label>
  <label><input type="checkbox">H</label>
  <label><input type="checkbox">I</label>
  <label><input type="checkbox">J</label>
  <label><input type="checkbox">K</label>
  <label><input type="checkbox">L</label>
</div>

取消选中java脚本中的复选框

2 个答案: