jquery css按钮设置为不可点击

kninwzqo  于 2023-03-29  发布在  jQuery
关注(0)|答案(6)|浏览(188)

我想设置按钮上的CSS为不可点击/禁用。我有一个表单,当我点击“发送”按钮时,我想设置按钮为禁用/不可点击。我该怎么做?
这里是按钮:

.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");
whitzsjs

whitzsjs1#

我希望这是工作(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);
dgenwo3n

dgenwo3n2#

尝试在你的元素中添加一个类,并提供下面的css:

超文本标记语言

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

}
希望这对你有帮助:-)

lb3vh1jj

lb3vh1jj3#

您要查找的代码是(假设按钮有ID)。

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

你可以在css中这样设计它:

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

9nvpjoqh4#

这是纯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/

wqlqzqxt

wqlqzqxt5#

试试这个

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

1qczuiv06#

禁用按钮

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

禁用按钮的CSS

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

相关问题