If checkbox is checked, change submit input

Question

I want that when one or all the checkbox are checked, submit button is not disabled. But if the checkboxes are not checked, then the submit is disabled.

I wrote this code :

$('input[type="submit"]').prop('disabled', true).addClass('disabled');

	$('input[type="checkbox"]').click(function(){
	    if (this.checked) {
	        $('input[type="submit"]').prop('disabled', false).removeClass('disabled');
	    } else {
	    	$('input[type="submit"]').prop('disabled', true).addClass('disabled');
	    }
	});

.disabled {
  background-color: #ececec !important;
  border: none;
}

input[type="submit"] {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<input type="submit" value="Send">

It's almost working but when I uncheck one checkbox, the submit button is already disabled but my others checkboxes are still checked.

Thanks for your help

Josh Crozier · Accepted Answer · 2016-01-07 01:52:24Z

I want that when one or all the checkbox are checked, submit button is not disabled. But if the checkboxes are not checked, then the submit is disabled.

Use the :checked selector to select checked checkboxes and then determine whether the length of the returned jQuery object is zero.
Rather than listening to the click even on the checkbox elements, listen to the change event.
You can use the :checkbox selector in place of input[type="checkbox"].
You will also need to replace the .addClass() method with the .toggleClass() method like below.

$('input[type="submit"]').prop('disabled', true).addClass('disabled');

$(':checkbox').on('click', function() {
  var atLeastOneChecked = $(':checkbox:checked').length === 0;
  $('input[type="submit"]').prop('disabled', atLeastOneChecked).toggleClass('disabled', atLeastOneChecked);
});

.disabled { background-color: #ececec; border: none; }
input[type="submit"] { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<input type="submit" value="Send">

As a side note, you will need to add some classes to the elements so that not all of the checkboxes in the DOM are selected..

RaymondM · Accepted Answer · 2016-01-07 01:49:17Z

1

$('input[type="submit"]').prop('disabled', true).addClass('disabled');

$('input[type="checkbox"]').click(function(){
    if ($('input[type="checkbox"]:checked').length > 0){
        $('input[type="submit"]').prop('disabled', false).removeClass('disabled');
    }else {
        $('input[type="submit"]').prop('disabled', true).addClass('disabled');
    }
});

answered Jan 7, 2016 at 1:49

RaymondM

3281 silver badge10 bronze badges

Comments

Jason · Accepted Answer · 2016-01-07 01:56:00Z

0

You should create a separate function that gets called when your checkbox is clicked, something like this:

function toggleSubmit() {
    var boxes = $(':checked');
    var button = $('input[type=submit]');
    if (boxes.length) {
        button.removeAttr('disabled').removeClass('disabled');
    } else {
        button.attr('disabled', 'disabled').addClass('disabled');
    }
}

$(document).on('change', ':checkbox', toggleSubmit);

answered Jan 7, 2016 at 1:56

Jason

52.7k38 gold badges139 silver badges188 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

So you could do this all in one line, I just made the bool as a variable. I'd also set the disabled attributes in html initially.

HTML

<input type="submit" disabled class="disabled"/>

jQuery

$('input[type="checkbox"]').on('change', function(){
    var bool = $('input[type="checkbox"]:checked').length > 0;
    $('input[type="submit"]').prop('disabled',!bool).toggleClass('disabled', !bool);
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 7, 2016 at 2:09

Donnie D'Amato

3,9701 gold badge20 silver badges42 bronze badges

Collectives™ on Stack Overflow

If checkbox is checked, change submit input

4 Answers 4

Comments

Comments

Comments

HTML

jQuery

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

HTML

jQuery

Comments

Your Answer

Sign up or log in

Post as a guest

Related