Button enabled and disabled based on checkbox is checked or not

Question

I have been facing an issue when none checkbox is checked then button will not be disabled it's still enabled.

I also put attribute on button of disabled but still it's enabled;

here is my code

<input class="form-check-input tab1_chk" type="checkbox" name="2[]"  value="1">Option 1

<input class="form-check-input tab1_chk" type="checkbox" name="2[]"  value="2">Option 2

<input class="form-check-input tab1_chk" type="checkbox" name="2[]"  value="2">Option 3
<br>
<br>
<button type='button' class='tab1_btn' name="next" id="next">              
    Next       
</button>

if ($(".tab1_chk:checked" )) {
  $('.tab1_btn').prop('disabled', false);
} else {
  $('.tab1_btn').prop('disabled', true);
}

When I give the alert before this $('.tab1_btn').prop('disabled', false);

Then alert is showing when it's run but also giving alert 2 before this $('.tab1_btn').prop('disabled', true); then alert is not showing only first alert is showing

JSFiddle

I need when no any checkbox is checked then next button will be disabled

Answer 1

You need to apply an event handler

$('.tab1_btn').prop('disabled', !$('.tab1_chk:checked').length);//initially disable/enable button based on checked length
$('input[type=checkbox]').click(function() {
    if ($('.tab1_chk:checkbox:checked').length > 0) {
        $('.tab1_btn').prop('disabled', false);
    } else {
        $('.tab1_btn').prop('disabled', true);
    }
});

Working snippet:- https://jsfiddle.net/bmpp663q/

Answer 2

To make this work you need to check if there are any checked checkboxes when any of their states change.

To do this you can attach a change event handler to them all which then uses the :checked selector to determine if any have been chosen and then enable/disable the button as required. Try this:

 $('.form-check-input').change(function() { $('#next').prop('disabled', !$('.form-check-input:checked').length); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label> <input class="form-check-input tab1_chk" type="checkbox" name="2[]" value="1"> Option 1 </label> <label> <input class="form-check-input tab1_chk" type="checkbox" name="2[]" value="2"> Option 2 </label> <label> <input class="form-check-input tab1_chk" type="checkbox" name="2[]" value="2"> Option 3 </label><br /><br /> <button type="button" class="tab1_btn" name="next" id="next" disabled="true">Next</button> 

Answer 3

Try below code its working for me:

$(document).ready(function(){
    checkboxDisable()

    $(".tab1_chk").click(function(){
    checkboxDisable();
  });


  function checkboxDisable(){
    if($(".tab1_chk:checked").length > 0)
    {
      $('.tab1_btn').prop('disabled', false);

    }else{
      $('.tab1_btn').prop('disabled', true);

    }
  }
});

Answer 4

Event handler is a great solution... Loved it!! And if you want to do this on your page load you can do it by making a slight change to you existing code like:

if ($(".tab1_chk").is(':checked')) {
  $('.tab1_btn').prop('disabled', false);
} else {
  $('.tab1_btn').prop('disabled', true);
}

It works, I tried it with your code!!