求助：单选框选中时禁用不同name/id的复选框实现方案

Got it, let's fix this issue for you! The problem with your original code is that it relies on matching the name attribute to link the radio button and checkboxes, but since you need unique names for clean form data collection, we need a better way to group these elements together.

Step 1: Use Data Attributes to Group Elements #

Instead of sharing name values, we'll use custom data attributes to mark which checkboxes should be controlled by your "No Past Conditions" radio button. This keeps your form data organized while maintaining the association:

<form>
  <!-- Add data-target-group to the radio button to define its controlled checkbox group -->
  <input type="radio" name="no-past-conditions" id="rb0" onclick="ckChange(this)" data-target-group="medical-history" />
  <label for="rb0">No Past Conditions </label>

  <!-- Add data-group to each checkbox that belongs to the controlled set -->
  <input type="checkbox" name="heart-disease" id="cb1" value="Yes" data-group="medical-history" />
  <label for="cb1">Heart disease </label>
  
  <input type="checkbox" name="anemia-or-blood-disease" id="cb2" value="Yes" data-group="medical-history" />
  <label for="cb2">Anemia or other blood disease</label>
  
  <input type="checkbox" name="severe-headaches" id="cb3" value="Yes" data-group="medical-history" />
  <label for="cb3">Severe headaches</label>
</form>

Step 2: Rewrite the JavaScript Function #

Now we'll update the ckChange function to use these data attributes instead of name. The logic is straightforward: when the radio button is checked, disable all linked checkboxes (and uncheck them to avoid leftover selections); when it's not checked, re-enable those checkboxes.

function ckChange(radioBtn) {
  // Get the target group name from the radio button's data attribute
  const targetGroup = radioBtn.dataset.targetGroup;
  // Find all checkboxes in the specified group
  const checkboxes = document.querySelectorAll(`input[type="checkbox"][data-group="${targetGroup}"]`);

  // Update each checkbox's state based on the radio button's status
  checkboxes.forEach(checkbox => {
    if (radioBtn.checked) {
      checkbox.disabled = true;
      checkbox.checked = false; // Clear any existing selection
    } else {
      checkbox.disabled = false;
    }
  });
}

Why This Works Better #

• Clean Form Data: Each checkbox has a unique, descriptive name that makes data collection and parsing much easier.
• Scalable Grouping: You can add more checkboxes to the group later just by adding the same data-group attribute—no need to adjust the JavaScript.
• Clearer Logic: The function directly links the radio button to its target checkboxes, avoiding confusion from shared name attributes.

Quick Fix for Your Original ID-Based Attempt #

Just to address your earlier try with getElementById—the main issue was missing quotes around the ID string. It should have looked like this:

for (let j = 1; j <= 3; j++) { // Match your checkbox IDs (cb1, cb2, cb3)
  const checkbox = document.getElementById(`cb${j}`);
  // Add your disable/enable logic here
}

That said, using data attributes is far more flexible than hardcoding IDs, especially if you ever need to add or remove checkboxes from the form.

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