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.
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;" />
! - not operator
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;
};
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.
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
}
});
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;
}
}
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/
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);
}
});
