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

Death-is-the-real-truth · Accepted Answer · 2018-05-16 10:57:27Z

4

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/

edited May 16, 2018 at 10:57

answered May 16, 2018 at 10:35

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arslan Over a year ago

Thank you so much now its working as per I need.. Thanx once again

Death-is-the-real-truth Over a year ago

@Arslan glad to help you :):)

Arslan Over a year ago

if ($('.tab1_chk:checkbox:checked').length > 0) how to change this line when radio button comes?

Death-is-the-real-truth Over a year ago

Instead of checkbox do radio everywhere

Rory McCrossan · Accepted Answer · 2018-05-16 10:37:54Z

1

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>

answered May 16, 2018 at 10:37

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

2 Comments

Death-is-the-real-truth Over a year ago

you need to tell OP that initially button need to be disabled (what you used in HTML code)

Rory McCrossan Over a year ago

That part just seemed like common sense given the initial state of the page :)

Sukumar Gorai · Accepted Answer · 2018-05-16 10:40:49Z

0

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

    }
  }
});

answered May 16, 2018 at 10:40

Sukumar Gorai

2962 silver badges17 bronze badges

Comments

Shubham Bhattacharya · Accepted Answer · 2018-05-16 11:13:36Z

0

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

edited May 16, 2018 at 11:13

answered May 16, 2018 at 11:02

Shubham Bhattacharya

1009 bronze badges

Collectives™ on Stack Overflow

Button enabled and disabled based on checkbox is checked or not

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related