按钮

禁用按钮很简单，因为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演示。

值得进一步注意的是，上述函数也适用于所有输入类型。

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

<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'属性。

我知道我来晚了，但我要具体回答两个问题:

“我只是想禁用特定的点击内容，以便:

它们停止点击 他们看起来很残疾

这能有多难?”

它们停止点击

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/

希望这能有所帮助。

假设你在页面上有这样的按钮:

<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").attr('disabled', 'disabled');

上面的方法并不管用，因为有时候

$(this).attr('checked') == undefined

使用以下命令调整代码

if(!$(this).attr('checked') || $(this).attr('checked') == false){