Enable / disable multiple buttons with a checkbox

Question

I'm a big newbie and practically know nothing about JavaScript, so please bear with me in advance.

I have two buttons that I want to be disable until a checkbox is clicked. Only one button seems to be working with the code I have.

function terms_changed(termsCheckBox) {
	//If the checkbox has been checked
	if (termsCheckBox.checked) {
		//Set the disabled property to FALSE and enable the button.
		document.getElementById("submit_button2").disabled = false;
	} else {
		//Otherwise, disable the submit button.
		document.getElementById("submit_button2").disabled = true;
	}
}

function terms_changed(termsCheckBox) {
	//If the checkbox has been checked
	if (termsCheckBox.checked) {
		//Set the disabled property to FALSE and enable the button.
		document.getElementById("test").disabled = false;
	} else {
		//Otherwise, disable the submit button.
		document.getElementById("test").disabled = true;
	}
}

<form method="post">
	<div><label for="terms_and_conditions">I understand</label><input type="checkbox" id="terms_and_conditions" onclick="terms_changed(this)" /></div>
	<div>
		<button id="test" button type="button" disabled onclick="window.location.href = '/innovation/vision-test/amd/';">Start 1st test</button>

		<button id="submit_button2" button type="button" disabled onclick="window.location.href = '/innovation/vision-test/acuity/';">Start the 2nd test</button>
	</div>
</form>

Narendra Chouhan · Accepted Answer · 2020-04-17 06:59:38Z

you have created the two function with the same name, that's override the first function that's the mistake

function terms_changed(termsCheckBox) {
	//If the checkbox has been checked
	if (termsCheckBox.checked) {
	  //Set the disabled property to FALSE and enable the button.
	  document.getElementById("submit_button2").disabled = false;
          document.getElementById("test").disabled = false
	} else {
	  //Otherwise, disable the submit button.
	  document.getElementById("submit_button2").disabled = true;
          document.getElementById("test").disabled = true;
	}
}

<form method="post">
  <div><label for="terms_and_conditions">I understand</label><input type="checkbox" id="terms_and_conditions" onclick="terms_changed(this)" /></div>
     <div>
	<button id="test" button type="button" disabled onclick="window.location.href = '/innovation/vision-test/amd/';">Start 1st test</button>
	<button id="submit_button2" button type="button" disabled onclick="window.location.href = '/innovation/vision-test/acuity/';">Start the 2nd test</button>
    </div>
</form>

norbitrial · Accepted Answer · 2020-04-17 06:53:20Z

You defined the function twice. In JavaScript if you define in that way then the second definition will override the original one.

Try as the following:

// define only once
const terms_changed = termsCheckBox => {
  document.getElementById("submit_button1").disabled = !termsCheckBox.checked;
  document.getElementById("submit_button2").disabled = !termsCheckBox.checked;
}

const terms = document.getElementById('terms_and_conditions');
// calling initially the function with the passed term_and_conditions input
terms_changed(terms);

<form method="post">
   <div><label for="terms_and_conditions">I understand</label><input type="checkbox" id="terms_and_conditions" onclick="terms_changed(this)" /></div>
   <div>
      <button id="submit_button1" button type="button" disabled onclick="window.location.href = '/innovation/vision-test/amd/';">Start 1st test</button>
      <button id="submit_button2" button type="button" disabled onclick="window.location.href = '/innovation/vision-test/acuity/';">Start the 2nd test</button>
   </div>
</form>

I hope this helps!

Jacksparrow · Accepted Answer · 2020-04-17 07:19:00Z

You don't want to use two functions and make it simple as following

<form action="#" method="post">
      <div>
        <label for="check">Check after test it</label>
        <input type="checkbox" id="check" />
      </div>

      <div>
        <button class="test-btn" type="submit" disabled>Test - 1</button>
        <button class="test-btn" type="submit" disabled>Test - 2</button>
      </div>
    </form>

    <script>
      var check_input = document.getElementById('check');
      var test_btns = document.querySelectorAll('.test-btn');

      check_input.addEventListener("click", (e) => {        
        if (check_input.checked === true) {
          test_btns.forEach((btn) => {
            btn.disabled = false;
          });
        }else{
            test_btns.forEach((btn) => {
            btn.disabled = true;
          });
        }
      });
    </script>

Collectives™ on Stack Overflow

Enable / disable multiple buttons with a checkbox

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related