有时我使用样式为按钮的锚,有时我只使用按钮。我想禁用特定的点击东西,以便:
他们看起来很残疾 它们不再被点击
我该怎么做呢?
有时我使用样式为按钮的锚,有时我只使用按钮。我想禁用特定的点击东西,以便:
他们看起来很残疾 它们不再被点击
我该怎么做呢?
当前回答
@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
我希望这有助于简化一些事情。
其他回答
这是一个相当晚的答案,但我无意中发现了这个问题,在寻找一种方法禁用启动按钮后点击他们,可能会增加一个很好的效果(f.e旋转)。我发现了一个很棒的库,它可以做到这一点:
http://msurguy.github.io/ladda-bootstrap/
你只需要包括所需的css和js,添加一些属性到你的按钮和启用lada与javascript…您看!你的按钮有一个新的生命(请检查演示,看看它是多么美丽)!
注意,如果你使用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);
有点烦人,但这是我经常使用的模式。
对于这种行为,我总是使用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类(如果改变了)也会改变其他小部件的样式。
@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
我希望这有助于简化一些事情。
上面的方法并不管用,因为有时候
$(this).attr('checked') == undefined
使用以下命令调整代码
if(!$(this).attr('checked') || $(this).attr('checked') == false){