如何用jQuery实现CheckBoxList选中9/10/11项时禁用其他指定复选框？

Here's a straightforward implementation that meets your requirements. The key is to listen for change events on the checkboxes, check if any of the "special" values (9,10,11) are selected, and adjust the enabled state of the other checkboxes accordingly.

Step-by-Step Explanation: #

1. Target the CheckBoxList: ASP.NET renders the CheckBoxList as an HTML table, so we first select all checkbox inputs inside that table.
2. Listen for Changes: Attach a change event handler to each checkbox.
3. Check for Special Selections: Determine if any of the checkboxes with values 9,10, or 11 are checked.
4. Toggle Enabled State:
   • If any special checkbox is checked: Disable all checkboxes except the three special ones (so 9,10,11 remain interactable).
   • If none of the special checkboxes are checked: Re-enable all checkboxes in the list.

jQuery Code: #

$(document).ready(function() {
    // Get all checkboxes within the CheckBoxList (use ClientID for ASP.NET generated IDs)
    const $allCheckboxes = $("#<%= checkboxlist1.ClientID %> input[type='checkbox']");
    
    // Define the special values we care about
    const specialValues = ['9', '10', '11'];
    
    $allCheckboxes.on('change', function() {
        // Check if any special checkbox is checked
        const hasSpecialChecked = $allCheckboxes.filter(function() {
            return specialValues.includes($(this).val()) && $(this).is(':checked');
        }).length > 0;
        
        if (hasSpecialChecked) {
            // Disable all non-special checkboxes
            $allCheckboxes.filter(function() {
                return !specialValues.includes($(this).val());
            }).prop('disabled', true);
            
            // Ensure special checkboxes are always enabled
            $allCheckboxes.filter(function() {
                return specialValues.includes($(this).val());
            }).prop('disabled', false);
        } else {
            // Re-enable all checkboxes when no special ones are selected
            $allCheckboxes.prop('disabled', false);
        }
    });
});

Important Notes: #

• ASP.NET ClientID: If your CheckBoxList uses the default ClientIDMode="AutoID", the rendered HTML ID will be different from the server-side ID. Using <%= checkboxlist1.ClientID %> ensures we target the correct table element. If you've set ClientIDMode="Static", you can replace that with #checkboxlist1.
• ListItem Values: Make sure your ListItem elements for the special options have the correct Value attributes:

  <asp:ListItem Value="9">Option 9</asp:ListItem>
  <asp:ListItem Value="10">Option 10</asp:ListItem>
  <asp:ListItem Value="11">Option 11</asp:ListItem>
  

• Edge Cases: This handles scenarios where multiple special checkboxes are selected (e.g., checking 9 then 10 keeps 11 enabled and others disabled) and reverts to full interactivity when all special checkboxes are unchecked.

内容的提问来源于stack exchange，提问作者lanes123