css button set to unclickable
Try adding a class in your element and provide below css to it :-
HTML
<input type="button" value="Save" class="Disabled"/>
CS
.Disabled{
pointer-events: none;
cursor: not-allowed;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
Hope this helps :-)
this is pure JS, HTML and CSS (i hope i helped)
/* ignore top lines */
document.getElementById("theButton").addEventListener("click", myFunction);
/* ignore top lines */
function myFunction() {
document.getElementById("theButton").disabled = true;
}
.theButton {
display: inline-block;
width: 540px;
margin: 20px 0 10px;
padding: 12px;
background-color: #b6adb4;
border-radius: 2px;
border: 0px;
text-align: center;
color: #fff !important;
text-decoration: none !important;
font-size: 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.theButton:disabled {
display: inline-block;
width: 540px;
margin: 20px 0 10px;
padding: 12px;
background-color: #b6adb4;
border-radius: 2px;
border: 0px;
text-align: center;
color: #fff !important;
text-decoration: none !important;
font-size: 16px;
font-family: 'Rubik', sans-serif;
opacity: 0.5;
}
<button class="theButton" id="theButton">
Click to disable
</button>
JSFIDDLE HERE: https://jsfiddle.net/HappyFone/swhbjer8/8/
I hope this is working (disabled
class added successfully):-
$(".good-form > .actions a, .theButton").addClass('disabled');
// IF NOT THEN USE $(".theButton").addClass('disabled');
Now add CSS like below:-
.disabled{
pointer-events: none;
}
This will also work (without additional CSS) :-
$(".good-form > .actions a, .theButton").prop('disabled',true);
// or $(".theButton").prop('disabled',true);
The code you are looking for is (assuming the button has an ID).
document.getElementById("theButton").disabled = true;
And you can style it in css like so:
#theButton:disabled{
background: white;
/*or whatever*/
}