有时我使用样式为按钮的锚,有时我只使用按钮。我想禁用特定的点击东西,以便:
他们看起来很残疾 它们不再被点击
我该怎么做呢?
有时我使用样式为按钮的锚,有时我只使用按钮。我想禁用特定的点击东西,以便:
他们看起来很残疾 它们不再被点击
我该怎么做呢?
当前回答
我想不出更简单的办法了!: -)
使用锚标签(链接):
<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>
要启用Anchor标签:
$('#delete').removeClass('disabled');
$('#delete').attr("data-toggle", "modal");
禁用Anchor标签:
$('#delete').addClass('disabled');
$('#delete').removeAttr('data-toggle');
其他回答
这是一个相当晚的答案,但我无意中发现了这个问题,在寻找一种方法禁用启动按钮后点击他们,可能会增加一个很好的效果(f.e旋转)。我发现了一个很棒的库,它可以做到这一点:
http://msurguy.github.io/ladda-bootstrap/
你只需要包括所需的css和js,添加一些属性到你的按钮和启用lada与javascript…您看!你的按钮有一个新的生命(请检查演示,看看它是多么美丽)!
假设你在页面上有这样的按钮:
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>
js代码:
function change(){
var toenable = document.querySelectorAll(".byBtn");
for (var k in toenable){
toenable[k].removeAttribute("disabled");
}
}
假设你有这样的,目前是启用的。
<button id="btnSave" class="btn btn-info">Save</button>
只要加上这个:
$("#btnSave").prop('disabled', true);
你会得到这个,它会禁用按钮
<button id="btnSave" class="btn btn-primary" disabled>Save</button>
注意,如果你使用Bootstrap的JS按钮和“loading”状态,会有一个奇怪的问题。我不知道为什么会发生这种情况,但这里有如何解决它。
假设你有一个按钮,并将其设置为加载状态:
var myButton = $('#myBootstrapButton');
myButton.button('loading');
现在你想把它从加载状态中拿出来,但也要禁用它(例如,按钮是一个保存按钮,加载状态表明正在进行验证,验证失败)。这看起来像合理的Bootstrap JS:
myButton.button('reset').prop('disabled', true); // DOES NOT WORK
不幸的是,这将重置按钮,但不会禁用它。显然,button()执行一些延迟的任务。所以你也必须推迟你的残疾:
myButton.button('reset');
setTimeout(function() { myButton.prop('disabled', true); }, 0);
有点烦人,但这是我经常使用的模式。
如果你像我一样,只是想禁用一个按钮,请不要错过隐藏在这篇长文章中的简单答案:
$("#button").prop('disabled', true);