CODEWITHSUNDEEP
javascriptjquerycss
stacktom
stacktom

Reputation: 433

css button set to unclickable

I want to set the CSS on a button to unclickable/disable. I have a form, when I click on the "send" button, then I want to set the button to disable/unclickable. How do I do this?

Here is the button:

.good-form > .actions a,
.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;

}

and here is the jquery:

Firstly, I tried this: NOT WORKING!

$(".good-form > .actions a, .theButton").attr('disabled','disabled');

Secondy, I tried this: NOT WORKING

$(".good-form > .actions a, .theButton").addClass('disabled');

or

$(".good-form > .actions a, .theButton").addClass("disabled");

Upvotes: 43

Views: 153157

Answers (6)

Code Disease
Code Disease

Reputation: 64

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/

Upvotes: 2

john k
john k

Reputation: 6615

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*/
}

Upvotes: 3

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

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

Upvotes: 67

Kamran Kazmi
Kamran Kazmi

Reputation: 99

To disable button

$(".good-form > .actions a, .theButton").prop('disabled', true);

Css for disabled button

.theButton:disabled { /* YOUR CSS */}

Upvotes: 1

Archana Parmar
Archana Parmar

Reputation: 578

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 :-)

Upvotes: 22

vitjbr
vitjbr

Reputation: 1166

Try this one

$(".good-form > .actions a, .theButton").prop('disabled',true);

Upvotes: 1

Related Questions