有时我使用样式为按钮的锚,有时我只使用按钮。我想禁用特定的点击东西,以便:
他们看起来很残疾 它们不再被点击
我该怎么做呢?
有时我使用样式为按钮的锚,有时我只使用按钮。我想禁用特定的点击东西,以便:
他们看起来很残疾 它们不再被点击
我该怎么做呢?
当前回答
假设你在页面上有这样的按钮:
<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>
如果你想禁用可点击,你也可以在html中添加内联这个
style="cursor: not-allowed;"
我知道我的回答晚了,但在我看来,这是切换按钮“启用”和按钮“禁用”的最简单的方法。
function toggleButtonState(button){
//If button is enabled, -> Disable
if (button.disabled === false) {
button.disabled = true;
//If button is disabled, -> Enable
} else if (button.disabled === true) {
button.disabled = false;
}
}
假设你在页面上有这样的按钮:
<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");
}
}
@James Donnelly提供了一个全面的答案,它依赖于用一个新函数扩展jQuery。这是一个很好的想法,所以我要调整他的代码,让它以我需要的方式工作。
延长jQuery
$.fn.disable=-> setState $(@), true
$.fn.enable =-> setState $(@), false
$.fn.isDisabled =-> $(@).hasClass 'disabled'
setState=($el, state) ->
$el.each ->
$(@).prop('disabled', state) if $(@).is 'button, input'
if state then $(@).addClass('disabled') else $(@).removeClass('disabled')
$('body').on('click', 'a.disabled', -> false)
使用
$('.btn-stateful').disable()
$('#my-anchor').enable()
代码将处理单个元素或元素列表。
按钮和输入支持disabled属性,如果设置为true,它们将看起来是禁用的(多亏了bootstrap),并且在单击时不会触发。
锚点不支持disabled属性,因此我们将依赖.disabled类使它们看起来是禁用的(再次感谢bootstrap),并通过返回false连接一个默认的click事件来阻止单击(不需要preventDefault参见这里)。
注意:当重新启用锚时,您不需要取消此事件。简单地删除.disabled类就可以了。
当然,如果你在链接上附加了一个自定义的点击处理程序(在使用bootstrap和jQuery时非常常见),这就没有帮助了。因此,为了解决这个问题,我们将使用isDisabled()扩展来测试.disabled类,如下所示:
$('#my-anchor').click ->
return false if $(@).isDisabled()
# do something useful
我希望这有助于简化一些事情。