双复选框联动逻辑异常：Javascript提交按钮与免责条控制问题

Got it, let's break down what's going wrong and fix this properly!

Core Issues in Your Current Code #

• Only one checkbox has an event listener: You're only listening for changes on the terms checkbox (formInput), so checking/unchecking the marketing checkbox won't trigger your logic at all. That's why checking just one box might seem to work sometimes—if you check terms first, it runs the check, but if you check marketing first, nothing happens.
• DOM element reuse problem: You're creating legalClause once, then trying to removeChild and appendChild it repeatedly. Once you remove an element from the DOM, you can't just append it back like that without re-cloning it, which causes unexpected behavior. Also, your HTML already has the disclaimer div—no need to create it dynamically!
• Static initial check: The boxes variable only gets the checked count once on page load, not when checkboxes change.

Fixed Code #

First, let's keep your HTML mostly intact (we just ensure the disclaimer is properly structured):

<div id="checkboxRow" class="scfSectionContent">
  <input type="checkbox" name="terms" value="terms"> 
  * I have read and agree with the Terms of Use, Privacy Policy and Cookie Policy.<br>
  <input type="checkbox" name="marketing" value="marketing"> 
  I agree that Adecco Group AG can use my details to send me information about their activities. This may be by post, email, SMS, MMS, phone, social media, push notifications in apps and other means. I understand that I may opt out at any time.
  <div id="disclaimer">
    <br>
    <p>* Your application cannot be submitted, unless you have agreed to read our Terms of Use, Privacy Policy and Cookie Policy.</p>
  </div>
</div>

Now the JavaScript, with all fixes applied:

// Get all elements we need
const formInput = document.querySelector("input[name=terms]");
const marketingInput = document.querySelector("input[name=marketing]");
const cvSubmitButton = document.querySelector("input[type=submit]");
const scfSubmitButtonBorder = document.querySelector(".scfSubmitButtonBorder");
const disclaimer = document.getElementById("disclaimer");

// Initialize the form state
function updateFormState() {
  const bothChecked = formInput.checked && marketingInput.checked;
  
  if (bothChecked) {
    // Enable button and hide disclaimer
    cvSubmitButton.classList.remove('disabled');
    scfSubmitButtonBorder.style.cursor = "pointer";
    disclaimer.style.display = "none";
    console.log('Both boxes checked');
  } else {
    // Disable button and show disclaimer
    cvSubmitButton.classList.add('disabled');
    scfSubmitButtonBorder.style.cursor = "not-allowed";
    disclaimer.style.display = "block";
    console.log('Not all boxes checked');
  }
}

// Add event listeners to BOTH checkboxes
formInput.addEventListener("change", updateFormState);
marketingInput.addEventListener("change", updateFormState);

// Set initial state when page loads
updateFormState();

Key Improvements #

• Reusable state function: updateFormState() handles all the logic in one place, so we don't repeat code for each checkbox.
• Both checkboxes have listeners: Now any change to either checkbox will trigger the validation.
• Safe visibility control: Instead of removing/adding the disclaimer element, we just toggle its display style—this keeps the element in the DOM but hides it, avoiding reuse issues.
• Initial state setup: We call updateFormState() on page load to make sure the button and disclaimer start in the correct state.

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