Disable submit button, if no checkBox is ticked

Question

I have some checkBoxes and as long as one of them is ticked, the submit button should be enabled.

However, I do not get the Javascript function right.

In the beginning, the submit button is always disabled, when I tick on checkBox it gets enabled and remains enabled for all the time.

Here is my code:

<td><input  type="checkbox" name="searchValues" th:value="${user.id}" th:checked="${user.isActive}" th:onclick="${'inputClick('''+ itemStat.index +''')'}" /></td>

The Javascript function

<script>    
    $(function(){
        $("input[type='checkBox']").change(function(){
            $("input[type='submit']").prop("disabled", false);
        });
    });
</script>

The submit button

<input type="submit" id="submitButton" th:value="Speichern" name="submit" disabled="disabled"/>

It could be that when loading the site that some checkBoxes are already ticked, so the submit button should be enabled, too. Only when nothing is ticked, the submit button should be disabled.

Maybe someone knows what I am missing here?

Answer 1

You can check the length of all the checked check boxes. If the length is 0 then you can set the disabled property to true otherwise remove the attribute. You can trigger the change event to set the button property on page load.

$(function(){
  $("input[type='checkBox']").change(function(){
    var len = $("input[type='checkBox']:checked").length;
    if(len == 0)
      $("input[type='submit']").prop("disabled", true);
    else
      $("input[type='submit']").removeAttr("disabled");
  });
  $("input[type='checkBox']").trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input  type="checkbox" name="searchValues" checked /></td>
    <td><input  type="checkbox" name="searchValues" /></td>
    <td><input  type="checkbox" name="searchValues" /></td>
  </tr>
</table>


<input type="submit" id="submitButton" th:value="Speichern" name="submit" disabled="disabled"/>

Answer 2

Using vanilla Javascript, this would do the job:

// get a list of the checkboxes and spread it into an array
// so later you can use Array methods on it
const checkboxes = [...document.querySelectorAll('input[type=checkbox]')]

// function that tells you if any checkboxes in
// the above list are checked
function anyChecked() {
  // this is where we're using an array method
  // Array.prototype.some
  return checkboxes.some(x=>x.checked)
}

// to every single checkbox, add a click listener
// again, using an Array method
// Array.prototype.forEach
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', () => {
    // when any checkbox is clicked,
    // check if there's any checked checkboxes
    anyChecked()
      // if so, enable the button
      ? submitbtn.removeAttribute('disabled')
      // otherwise, disable it
      : submitbtn.setAttribute('disabled','')
  })
})

// do the same thing initially as well 
// to account for initially checked checkboxes
anyChecked()
      ? submitbtn.removeAttribute('disabled')
      : submitbtn.setAttribute('disabled','')

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" checked />
<input type="checkbox" />
<input type="checkbox" />
<button type="submit" id="submitbtn">Submit</button>

Answer 3

You need to use $(this).is(':checked') in the prop() function to actually check if the checkbox was checked/unchecked instead of just change.

In your case, you need to use !$(this).is(':checked') so that when the checkbox is checked the submit button is enabled and vice-versa.

$(function() {
  $("input[type='checkBox']").change(function() {
    $("input[type='submit']").prop("disabled", !$(this).is(':checked'));
  });
  //for initial case
  $("input[type='checkBox']").trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" name="searchValues" th:value="${user.id}" th:checked="${user.isActive}" th:onclick="${'inputClick('''+ itemStat.index +''')'}" checked/></td>
  </tr>
</table>
<input type="submit" id="submitButton" th:value="Speichern" name="submit" disabled="disabled"/>