页面加载时根据Radio Button值控制Checkbox禁用状态的问题

To fix the initial state issue and preserve checkbox selections when "Interested" is active, use the following corrected JavaScript code:

<script>
$(document).ready(function() {
  // Central function to update checkbox section state
  function updateCheckboxState() {
    const isNotInterested = $('#RadInterest1').is(':checked');
    
    if (isNotInterested) {
      // Disable checkboxes and clear selections
      $('#reassignChecks').addClass('disableSection');
      $('#reassignChecks input[type="checkbox"]')
        .prop('disabled', true)
        .prop('checked', false);
    } else {
      // Enable checkboxes and retain existing selections
      $('#reassignChecks').removeClass('disableSection');
      $('#reassignChecks input[type="checkbox"]')
        .prop('disabled', false);
    }
  }

  // Initialize state when page loads (fixes database-loaded radio state)
  updateCheckboxState();

  // Attach change handlers to radio buttons
  $('#RadInterest0, #RadInterest1').on('change', updateCheckboxState);
});
</script>

Key Fixes & Improvements #

• Initial State Handling: The updateCheckboxState function runs on page load, checking which radio button is selected from the database and applying the correct disable/enable state to the checkboxes. This resolves the issue where "Not Interested" was selected but checkboxes remained enabled.
• Preserve Checkbox Selections: When switching to "Interested", we no longer force checkboxes to be unchecked. Any pre-selected checkboxes (from the database) will stay checked.
• Consistent Property Management: Using prop() instead of attr()/removeAttr() for the disabled property is more reliable for boolean attributes in jQuery.
• Code Reusability: Combining all logic into a single function ensures consistency between initial load and user interactions, avoiding duplicate code.
• Fixed Syntax Error: The original code had a change handler outside the <script> tag—this version wraps all logic properly.

Additional Notes #

• Ensure your disableSection CSS class applies the desired styling for disabled sections (e.g., grayscale, reduced opacity) to visually indicate the state to users.
• The existing AnyLocation() onclick handler on checkboxes will only run when checkboxes are enabled, which aligns with the desired behavior.

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