问题

有时我使用锚被称为按钮,有时我只是使用按钮.我想禁用特定的点击事件,以便:

  • They look disabled
  • They stop being clicked

我该如何做?



解决方法

Buttons

按钮易于禁用,因为已禁用是由浏览器处理的按钮属性:

<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);

Anchor Tags

值得注意的是, 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 .为了防止这种情况,我们可以在 disabled 类中添加一个简单的jQuery代码来定位锚标签,以调用 event.preventDefault() :

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

我们可以使用 toggleClass()来切换 disabled 代码> :

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禁用链接演示 .


Combined

然后,我们可以扩展上述禁用函数,以检查我们尝试使用禁用的元素类型 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演示 .

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




相关问题推荐