Disable button if one of the checkboxes are not checked

Issue

I have two checkboxes in HTML called accepttermsandcond-checkbox and accepttermsandcond-checkbox and I made a Button called startusing-button

I want the startusing-button to stay disabled, if one of these checkboxes are not checked.

The problem is that it disables it right now in the beginning, but if I check both, it doesn't enable the button.

Note: even if I add document.getElementById('startusing-button').disabled = false; to the code it doesn't solve the issue

How could I make the button to be enabled only if both of the checkboxes are checked?

Edit: I forgot to mention that I have a lot of checkboxes and buttons. It would be ideal if the solution only affected these two checkboxes with one button, leaving the rest of the checkboxes and buttons alone.

    var ebpDocumentCheckboxid = document.getElementById('document-checkboxid');
    var ebpAcceptTermsandCondCheckbox =document.getElementById('accepttermsandcond-checkbox');

            if (ebpDocumentCheckboxid.checked && ebpAcceptTermsandCondCheckbox.checked) { 
              
            }
            else {
                document.getElementById('startusing-button').disabled = true;

            }

<input type="checkbox" id="document-checkboxid"/>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox"/>


<button type="button" id="startusing-button">CreateSubscription</button>

Solution

You have to trigger change of checkboxes.

Simply checking both checkboxes have checked or not, will work only on the loading of document. You have to repeat this process each time the checkbox status is changed.

I have modified your script a little bit.

Logic

• Select all checkboxes using document.querySelectorAll('input[type="checkbox"]').
• Add a change event on checkbox by looping this list using forEach.
• Inside the change event, find the count of selected checkboxes.
• If that matches to the length of total check box, enable the button, or disable it.

const checkBoxes = document.querySelectorAll('input[type="checkbox"]');
const submitButton = document.getElementById('startusing-button');
checkBoxes.forEach((cb) => {
  cb.addEventListener('change', checkButtonStatus);
});
function checkButtonStatus() {
  const checkedCount = [...checkBoxes].filter((cb) => cb.checked);
  submitButton.disabled = checkedCount.length !== checkBoxes.length
}
checkButtonStatus();    

<input type="checkbox" id="document-checkboxid" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" />

<button type="button" id="startusing-button">CreateSubscription</button>

Edit:

If you want to select only the two checkboxes, you can handle this in multiple ways. You can use some custom attribute with some unique value. Here in the below example I use identifier="my-custom-identifier" and make the inputs selection with document.querySelectorAll('input[identifier="my-custom-identifier"]'). This will check for all input elements with the identifier having value my-custom-identifier.

Why I use this approach is to make your solution a little more generic. You just have to use identifier="my-custom-identifier" in all inputs where you want to include for this checking.

Working Fiddle

const checkBoxes = document.querySelectorAll('input[identifier="my-custom-identifier"]');
const submitButton = document.getElementById('startusing-button');
checkBoxes.forEach((cb) => {
  cb.addEventListener('change', checkButtonStatus);
});
function checkButtonStatus() {
  const checkedCount = [...checkBoxes].filter((cb) => cb.checked);
  submitButton.disabled = checkedCount.length !== checkBoxes.length
}
checkButtonStatus();

<input type="checkbox" id="document-checkboxid" identifier="my-custom-identifier" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" identifier="my-custom-identifier" />
<button type="button" id="startusing-button">CreateSubscription</button>

If you still want to make use of only 2 element by picking them with id, you could select them using ids. Like document.querySelector('input[id="document-checkboxid"]') and document.querySelector('input[id="accepttermsandcond-checkbox"]') and bind change event to them. Inside the change event, check whether both are checked inside the change function.

Working Fiddle

const checkBox1 = document.querySelector('input[id="document-checkboxid"]');
const checkBox2 = document.querySelector('input[id="accepttermsandcond-checkbox"]');
const submitButton = document.getElementById('startusing-button');

checkBox1.addEventListener('change', checkButtonStatus);
checkBox2.addEventListener('change', checkButtonStatus);

function checkButtonStatus() {
  const allChecked = checkBox1.checked && checkBox2.checked;
  submitButton.disabled = !allChecked;
}
checkButtonStatus();

<input type="checkbox" id="document-checkboxid" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" />
<button type="button" id="startusing-button">CreateSubscription</button>

Answered By - Nitheesh