Question

我想将我的css按钮设置为unlickable / disable。我点了一张表格，当我点击＆＃34;发送＆＃34;按钮之后我想设置此按钮以禁用/不可点击。任何人都可以帮助我吗？

这是我的按钮：

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

}

这是我的jquery：

首先我试过这个：不工作！

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

我试过这个：不工作

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

或

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

感激不尽！

Answer 1

我希望这是有效的（disabled类已成功添加）： -

$(".good-form > .actions a, .theButton").addClass('disabled');
// IF NOT THEN USE $(".theButton").addClass('disabled');

现在添加如下的CSS： -

.disabled{
  pointer-events: none;
}

这也可以 （没有额外的CSS）： -

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

Answer 2

尝试在元素中添加一个类，并在其下面提供css： -

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

}

希望这会有所帮助： - ）

Answer 3

试试这个

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

Answer 4

禁用按钮

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

禁用按钮的Css

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

Answer 5

您要查找的代码是（假设按钮具有ID）。

document.getElementById("theButton").disabled = true;

您可以像这样在CSS中设置样式：

#theButton:disabled{
   background: white;
   /*or whatever*/
}

Answer 6

这是纯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此处：https://jsfiddle.net/HappyFone/swhbjer8/8/

css按钮设置为无法点击

6 个答案: