有时我使用样式为按钮的锚,有时我只使用按钮。我想禁用特定的点击东西,以便:

他们看起来很残疾 它们不再被点击

我该怎么做呢?


当前回答

这是一个相当晚的答案,但我无意中发现了这个问题,在寻找一种方法禁用启动按钮后点击他们,可能会增加一个很好的效果(f.e旋转)。我发现了一个很棒的库,它可以做到这一点:

http://msurguy.github.io/ladda-bootstrap/

你只需要包括所需的css和js,添加一些属性到你的按钮和启用lada与javascript…您看!你的按钮有一个新的生命(请检查演示,看看它是多么美丽)!

其他回答

这是一个相当晚的答案,但我无意中发现了这个问题,在寻找一种方法禁用启动按钮后点击他们,可能会增加一个很好的效果(f.e旋转)。我发现了一个很棒的库,它可以做到这一点:

http://msurguy.github.io/ladda-bootstrap/

你只需要包括所需的css和js,添加一些属性到你的按钮和启用lada与javascript…您看!你的按钮有一个新的生命(请检查演示,看看它是多么美丽)!

假设你有这样的,目前是启用的。

<button id="btnSave" class="btn btn-info">Save</button>

只要加上这个:

$("#btnSave").prop('disabled', true);

你会得到这个,它会禁用按钮

<button id="btnSave" class="btn btn-primary" disabled>Save</button>

假设你有文本框和提交按钮,

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

禁用:

要禁用任何按钮,例如,提交按钮,你只需要添加disabled属性为,

$('input[type="submit"]').attr('disabled','disabled');

执行上述代码行后,你的提交按钮html标签看起来是这样的:

<input type="submit" class="btn" value="Submit" disabled/>

注意添加了'disabled'属性。

启用:

用于启用按钮,例如当文本字段中有一些文本时。您将需要删除启用按钮的禁用属性,

 if ($('#text-field').val() != '') {
     $('input[type="submit"]').removeAttr('disabled');
 }

现在上面的代码将删除'disabled'属性。

如果你像我一样,只是想禁用一个按钮,请不要错过隐藏在这篇长文章中的简单答案:

 $("#button").prop('disabled', true);

对于这种行为,我总是使用jQueryUI按钮小部件,我将它用于链接和按钮。

在HTML中定义标签:

<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>

使用jQuery初始化按钮:

$("#sampleButton").button();
$("#linkButton").button();

使用按钮小部件方法禁用/启用它们:

$("#sampleButton").button("enable"); //enable the button
$("#linkButton").button("disable"); //disable the button

这将处理按钮和游标行为,但如果您需要深入了解并在禁用时更改按钮样式,那么请在页面CSS样式文件中覆盖以下CSS类。

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
      background-color:aqua;
      color:black;
 }

但是请记住:这些CSS类(如果改变了)也会改变其他小部件的样式。