Disabling and enabling a html input button
JavascriptJqueryJavascript Problem Overview
So I have a button like this:
<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>
How can I disable and enable it when I want? I have tried disabled="disable"
but enabling it back is a problem. I tried setting it back to false but that didn't enable it.
Javascript Solutions
Solution 1 - Javascript
Using Javascript
-
Disabling a html button
document.getElementById("Button").disabled = true;
-
Enabling a html button
document.getElementById("Button").disabled = false;
Using jQuery
All versions of jQuery prior to 1.6
-
Disabling a html button
$('#Button').attr('disabled','disabled');
-
Enabling a html button
$('#Button').removeAttr('disabled');
All versions of jQuery after 1.6
-
Disabling a html button
$('#Button').prop('disabled', true);
-
Enabling a html button
$('#Button').prop('disabled', false);
P.S. Updated the code based on jquery 1.6.1 changes. As a suggestion, always use the latest jquery files and the prop()
method.
Solution 2 - Javascript
Since you are disabling it in the first place, the way to enable it is to set its disabled
property as false
.
To change its disabled
property in Javascript, you use this:
var btn = document.getElementById("Button");
btn.disabled = false;
And obviously to disable it again, you'd use true
instead.
Since you also tagged the question with jQuery, you could use the .prop
method. Something like:
var btn = $("#Button");
btn.prop("disabled", true); // Or `false`
This is in the newer versions of jQuery. The older way to do this is to add or remove an attribute like so:
var btn = $("#Button");
btn.attr("disabled", "disabled");
// or
btn.removeAttr("disabled");
The mere presence of the disabled
property disables the element, so you cannot set its value as "false". Even the following should disable the element
<input type="button" value="Submit" disabled="" />
You need to either remove the attribute completely or set its property.
Solution 3 - Javascript
You can do this fairly easily with just straight JavaScript, no libraries required.
Enable a button
document.getElementById("Button").disabled=false;
Disable a button
document.getElementById("Button").disabled=true;
No external libraries necessary.
Solution 4 - Javascript
the disable attribute only has one parameter. if you want to reenable it you have to remove the whole thing, not just change the value.
Solution 5 - Javascript
With jQuery you can do in a single line
//Enable
$('#Button').prop('disabled', false)
//Disable
$('#Button').prop('disabled', true)
Solution 6 - Javascript
$(".btncancel").button({ disabled: true });
Here 'btncancel' is the class name of the button.
Solution 7 - Javascript
Without jQuery disable input will be simpler
Button.disabled=1;
function dis() {
Button.disabled= !Button.disabled;
}
<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>
<button onclick="dis()">Toggle disable</button>
Solution 8 - Javascript
<!--Button Disable Script-->
<script type="text/javascript">
function DisableButton() {
document.getElementById("<%=btnSave.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>
<!--Button Disable Script-->
Solution 9 - Javascript
While not directly related to the question, if you hop onto this question looking to disable something other than the typical input elements button, input, textarea
, the syntax won't work.
To disable a div or a span, use setAttribute
document.querySelector('#somedivorspan').setAttribute('disabled', true);
P.S: Gotcha, only call this if you intend to disable. A bug in chrome Version 83 causes this to always disable even when the second parameter is false.
Solution 10 - Javascript
Disabling/enabling an html input button with JavaScript:
(And React with refs. Replace "elementRef.current" with element selection if not using React)
elementRef.current.setAttribute('disabled', 'disabled');
Enable:
elementRef.current.removeAttribute('disabled');
Solution 11 - Javascript
This will surely work .
To Disable a button
$('#btn_id').button('disable');
To Enable a button
$('#btn_id').button('enable');
Solution 12 - Javascript
Stick to php...
Why not only allow the button to appear once an above criteria is met.
<?
if (whatever == something) {
$display = '<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>';
return $display;
}
?>