有时我使用样式为按钮的锚,有时我只使用按钮。我想禁用特定的点击东西,以便:
他们看起来很残疾 它们不再被点击
我该怎么做呢?
有时我使用样式为按钮的锚,有时我只使用按钮。我想禁用特定的点击东西,以便:
他们看起来很残疾 它们不再被点击
我该怎么做呢?
当前回答
我知道我来晚了,但我要具体回答两个问题:
“我只是想禁用特定的点击内容,以便:
它们停止点击 他们看起来很残疾
这能有多难?”
它们停止点击
1。对于<button>或<input type="button">这样的按钮,您可以添加属性:disabled。
<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>
2。对于链接,任何链接…实际上,任何HTML元素,你都可以使用CSS3指针事件。
.selector { pointer-events:none; }
浏览器对指针事件的支持在今天的技术水平上是非常棒的(5/12/14)。但是我们通常必须支持IE领域的传统浏览器,所以IE10及以下不支持指针事件:http://caniuse.com/pointer-events。因此,使用其他人在这里提到的JavaScript解决方案之一可能是传统浏览器的出路。
有关指针事件的更多信息:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events http://wiki.csswg.org/spec/css4-ui#pointer-events
他们看起来很残疾
显然这是一个CSS的答案,所以:
1。对于<button>或<input type="button">这样的按钮,使用[attribute]选择器:
button[disabled] { ... }
input[type=button][disabled] { ... }
--
下面是我在这里提到的东西的一个基本演示:http://jsfiddle.net/bXm5B/4/
希望这能有所帮助。
其他回答
按钮
禁用按钮很简单,因为disabled是一个由浏览器处理的按钮属性:
<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>
要使用自定义jQuery函数禁用这些功能,只需使用fn.extend():
// Disable function
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
this.disabled = state;
});
}
});
// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);
// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);
JSFiddle禁用按钮和输入演示。
否则,您将使用jQuery的prop()方法:
$('button').prop('disabled', true);
$('button').prop('disabled', false);
锚标记
值得注意的是,disabled不是锚标记的有效属性。出于这个原因,Bootstrap在它的.btn元素上使用以下样式:
.btn.disabled, .btn[disabled] {
cursor: default;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #333;
background-color: #E6E6E6;
}
注意[disabled]属性和.disabled类是如何作为目标的。disabled类是使锚标记显示为禁用所需要的。
<a href="http://example.com" class="btn">My Link</a>
当然,这不会阻止链接在单击时正常工作。上面的链接会把我们带到http://example.com。为了防止这种情况,我们可以添加一段简单的jQuery代码来使用禁用类来调用event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
我们可以使用toggleClass()来切换禁用类:
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
var $this = $(this);
$this.toggleClass('disabled', state);
});
}
});
// Disabled with:
$('a').disable(true);
// Enabled with:
$('a').disable(false);
JSFiddle禁用链接演示。
结合
然后,我们可以扩展前面的disable函数,使用is()检查我们试图禁用的元素类型。这样,如果它不是输入或按钮元素,我们可以toggleClass(),如果它是disabled属性,我们可以切换它:
// Extended disable function
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
var $this = $(this);
if($this.is('input, button, textarea, select'))
this.disabled = state;
else
$this.toggleClass('disabled', state);
});
}
});
// Disabled on all:
$('input, button, a').disable(true);
// Enabled on all:
$('input, button, a').disable(false);
完全结合JSFiddle演示。
值得进一步注意的是,上述函数也适用于所有输入类型。
@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
我希望这有助于简化一些事情。
假设你在页面上有这样的按钮:
<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");
}
}
假设你有文本框和提交按钮,
<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'属性。
我想不出更简单的办法了!: -)
使用锚标签(链接):
<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');