Disabel/Enable button based on if checkbox is checked or unchecked-CodePudding

I would like to make a check box which if checked the button enables. If the checkbox is unchecked the button should be disabled.

Could someone help me with this? I think I'm very close just missing a way to connect these lines.

Thanks in advance!

<button disabled="Calendly.initPopupWidget({url: 'https://calendly.com/xxxxxxxxxxx'});return false;">Plan</button>

<td width="10px" style="min-width: 10px"></td>
<td width="70%">
    <input type="checkbox" name="TOS" value="Accept" onClick="button enabled"> I agree to Terms of Service agreement.
</td>

CodePudding user response：

You can work on something like this.

const checkbox = document.getElementById('myCheckbox')
const planbtn = document.getElementById('planBtn')

checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    planbtn.disabled = false;
  } else {
    planbtn.disabled = true;
  }
})

<button id="planBtn" disabled="Calendly.initPopupWidget({url: 'https://calendly.com/xxxxxxxxxxx'});return false;">Plan</button>

<td width="10px" style="min-width: 10px"></td>
<td width="70%">
    <input type="checkbox" name="TOS" value="Accept" id="myCheckbox"> I agree to Terms of Service agreement.
</td>

CodePudding user response：

So, what you want to do is the following:

document.getElementById('TOS').onclick = function() {
  if (this.checked) {
    document.getElementById('plan').disabled = false;
  } else {
    document.getElementById('plan').disabled = true;
  }
}

<button disabled="Calendly.initPopupWidget({url: 'https://calendly.com/xxxxxxxxxxx'});return false;" id="plan">Plan</button>
<!-- id="plan" has been added for reference in JS -->

<td width="10px" style="min-width: 10px"></td>
<td width="70%">
  <input id="TOS" type="checkbox" name="TOS" value="Accept" onClick="button enabled"> I agree to Terms of Service agreement.
  <!-- id="TOS" has been added for reference in JS -->
</td>

All this does, is when the checkbox input has been clicked, the code checks to see if it is checked. If so, it sets disabled to false for the button. Otherwise, the disabled property of the button is true.