CODEWITHSUNDEEP
javascripthtmlbutton
Jaiden Fahey
Jaiden Fahey

Reputation: 35

Enable / disable multiple buttons with a checkbox

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>

Upvotes: 1

Views: 1123

Answers (3)

Jacksparrow
Jacksparrow

Reputation: 15

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>

Upvotes: 0

Narendra Chouhan
Narendra Chouhan

Reputation: 2319

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>

Upvotes: 1

norbitrial
norbitrial

Reputation: 15166

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!

Upvotes: 1

Related Questions