css button set to unclickable

Question

I wanna set my css button to unclickable/disable. I've a form, when i click on the "send" button after then i wanna set this button to disable/unclickable.Anybody could help me?

Here is my 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 my jquery:

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

Gratefully thanks!

Answer 1

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