How to disable/enable a button with a checkbox if checked

Question

Please i need a script that can work with the HTML code bellow to disable/enable the button when a checkbox is checked or unchecked,

<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />

please pals i don't mean the button to be disabled when checked, but rather the other way round.

Yuriy Galanter · Answer 1 · 2013-08-07T18:44:50.290

66

You can use onchangeevent of the checkbox to enable/disable button based on checked value

<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />

<input type="checkbox"  onchange="document.getElementById('sendNewSms').disabled = !this.checked;" />

edited Aug 07 '13 at 18:44

answered Aug 07 '13 at 18:27

Yuriy Galanter

38,833
15
69
136

thanks, but i never mean the other way, the code above disabled the button when checked, but i want the button to be disabled and then enabled when the checkbox is checked – Destiny Aug 07 '13 at 18:38
1

@Chidi updated the code. You simple needed to add `!` - `not` operator – Yuriy Galanter Aug 07 '13 at 18:45
this works way better than the other solutions provided – Rishabh Jan 07 '14 at 11:53
1

looks like one of those cases where inline javascript is the cleanest solution. Very nice! – Damien Roche Oct 12 '18 at 19:23
2

i would add the "disabled" attribute to the button – Javier Aviles Dec 07 '18 at 14:54
This will not work correctly if, on clicking a button, you go to another page, and then go back. For example, in Chrome, the checkbox remains active, but the button is disabled. This answer solves this problem: https://stackoverflow.com/a/17742818/9590536 – Ivan Minakov Sep 26 '22 at 21:57

brbcoding · Answer 2 · 2015-05-25T01:15:40.983

22

HTML

<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />

JS

var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function() {
  sendbtn.disabled = !!this.checked;
};

DEMO

edited May 25 '15 at 01:15

answered Aug 07 '13 at 18:36

brbcoding

13,378
2
37
51

1

Obviously just switch the `sendbtn.disabled = false` to `sendbtn.disabled = true` or vice versa as needed. If you want it disabled on first visit, you can just add disabled to the button to begin with. – brbcoding Aug 07 '13 at 18:49
Keep in mind, you'll need to check this serverside as well. All it takes is removing `disabled` from [this line](http://i.imgur.com/m6n4vUl.png) in devtools and the button is enabled again. – brbcoding Aug 07 '13 at 19:13
can we do the script inline with tag? – A-letubby Dec 15 '16 at 08:39

score 21 · Answer 3 · answered Aug 07 '13 at 18:37

You will have to use javascript, or the JQuery framework to do that. her is an example using Jquery

   $('#toggle').click(function () {
        //check if checkbox is checked
        if ($(this).is(':checked')) {

            $('#sendNewSms').removeAttr('disabled'); //enable input

        } else {
            $('#sendNewSms').attr('disabled', true); //disable input
        }
    });

DEMO: http://jsfiddle.net/T6hvz/

score 11 · Accepted Answer · answered Aug 07 '13 at 19:19

brbcoding have been able to help me with the appropriate coding i needed, here is it

HTML

<input type="checkbox" id="checkme"/>
  <input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

Javascript

 var checker = document.getElementById('checkme');
 var sendbtn = document.getElementById('sendNewSms');
 // when unchecked or checked, run the function
 checker.onchange = function(){
if(this.checked){
    sendbtn.disabled = false;
} else {
    sendbtn.disabled = true;
}

}

score 3 · Answer 5 · answered Aug 07 '13 at 18:45

Here is a clean way to disable and enable submit button:

<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
<input type="checkbox" id="disableBtn" />

var submit = document.getElementById('sendNewSms'),
    checkbox = document.getElementById('disableBtn'),
    disableSubmit = function(e) {
        submit.disabled = this.checked
    };

checkbox.addEventListener('change', disableSubmit);

Here is a fiddle of it in action: http://jsfiddle.net/sYNj7/

score 2 · Answer 6 · edited Oct 06 '14 at 23:43

I recommend using jQuery as it will do all the heavy lifting for you. The code is fairly trivial.

$('input:checkbox').click(function () {
  if ($(this).is(':checked')) {
    $('#sendNewSms').click(function () {
      return false;
    });
  } else {
    $('#sendNewSms').unbind('click');
  }
});

The trick is to override the 'click' event and effectively disable it. You can also follow it up with some CSS magic to make it look "disabled". Here is the code in JavaScript in case you need it. It's not perfect but it gets the point across.

var clickEvent = function () {
  return false;
};
document.getElementById('#checkbox').onclick(function () {
  if (document.getElementById('#checkbox').checked) {
    document
      .getElementById('#sendNewSms')
      .onclick(clickEvent);
  } else {
    document
      .getElementById('#sendNewSms')
      .removeEventListener('click', clickEvent, false);
  }
});

How to disable/enable a button with a checkbox if checked

6 Answers6

Linked

Related