Javascript css按钮设置为不可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46566019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css button set to unclickable
提问by stacktom
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?
我想将我的 css 按钮设置为不可点击/禁用。我有一个表格，当我点击“发送”按钮之后，我想将此按钮设置为禁用/不可点击。有人可以帮助我吗？
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:
这是我的 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!
万分感谢！
回答by Anant Singh---Alive to Die
I hope this is working (disabledclass added successfully):-
我希望这是有效的（disabled课程添加成功）：-
$(".good-form > .actions a, .theButton").addClass('disabled');
// IF NOT THEN USE $(".theButton").addClass('disabled');
Now add CSS like below:-
现在添加如下 CSS：-
.disabled{
pointer-events: none;
}
This will also work(without additional CSS) :-
这也可以工作（无需额外的 CSS）：-
$(".good-form > .actions a, .theButton").prop('disabled',true);
// or $(".theButton").prop('disabled',true);
回答by Archana Parmar
Try adding a class in your element and provide below css to it :-
尝试在您的元素中添加一个类并为其提供以下 css：-
HTML
HTML
<input type="button" value="Save" class="Disabled"/>
CS
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 :-)
希望这可以帮助 ：-）
回答by Happy Fone
this is pure JS, HTML and CSS (i hope i helped)
这是纯 JS、HTML 和 CSS（我希望我有所帮助）
/* 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/
JSFIDDLE 在这里：https://jsfiddle.net/HappyFone/swhbjer8/8/
回答by john ktejik
The code you are looking for is (assuming the button has an ID).
您正在寻找的代码是（假设按钮有一个 ID）。
document.getElementById("theButton").disabled = true;
And you can style it in css like so:
您可以像这样在 css 中设置样式：
#theButton:disabled{
background: white;
/*or whatever*/
}
回答by iamwtk
Try this one
试试这个
$(".good-form > .actions a, .theButton").prop('disabled',true);
回答by Kamran Kazmi
To disable button
禁用按钮
$(".good-form > .actions a, .theButton").prop('disabled', true);
Css for disabled button
禁用按钮的 CSS
.theButton:disabled { /* YOUR CSS */}
