Rectangle 27 0

javascript How to disableenable a button with a checkbox if checked?


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

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

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

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

Note
Rectangle 27 0

javascript How to disableenable a button with a checkbox if checked?


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

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

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

it's disable and not enbaling

Note
Rectangle 27 0

javascript How to disableenable a button with a checkbox if checked?


$('input:checkbox').click(function () {
  if ($(this).is(':checked')) {
    $('#sendNewSms').click(function () {
      return false;
    });
  } else {
    $('#sendNewSms').unbind('click');
  }
});
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);
  }
});

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

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.

Note
Rectangle 27 0

javascript How to disableenable a button with a checkbox if checked?


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

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

@Chidi updated the code. You simple needed to add ! - not operator

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

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

this works way better than the other solutions provided

Note
Rectangle 27 0

javascript How to disableenable a button with a checkbox if checked?


<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function() {
  sendbtn.disabled = !!this.checked;
};

Keep in mind, you'll need to check this serverside as well. All it takes is removing disabled from this line in devtools and the button is enabled again.

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.

can we do the script inline with <input> tag?

Note
Rectangle 27 0

javascript How to disableenable a button with a checkbox if checked?


<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 clean way to disable and enable submit button:

Note