CODEWITHSUNDEEP
javascriptjqueryhtml
Arslan
Arslan

Reputation: 433

Button enabled and disabled based on checkbox is checked or not

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

Upvotes: 2

Views: 3683

Answers (4)

Shubham Bhattacharya
Shubham Bhattacharya

Reputation: 100

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!!

Upvotes: 0

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

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/

Upvotes: 4

Sukumar Gorai
Sukumar Gorai

Reputation: 296

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);

    }
  }
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Related Questions