在jQuery中切换禁用属性答案

【问题标题】：toggle disabled attribute in jquery在jQuery中切换禁用属性
【发布时间】：2012-08-07 20:26:42
【问题描述】：

我有一个启用或禁用选择元素的复选框

其实我用了这段简单的代码，效果很好。

$("#filtri").change(function(){
    if ($("#menuContinenti").attr("disabled")) {
        $("#menuContinenti").removeAttr("disabled");
    } else {
        $("#menuContinenti").attr("disabled", "disabled");
    }
});

这是最好的方法还是有类似.toggle() 的功能可以在禁用/启用之间切换？

【问题讨论】：

如果它没有损坏...不要修复它:)
@FrançoisWahl 是的，它确实有效（正如我所写），但这是尝试这项任务的最佳方式吗？我希望 jquery 提供类似 .toggle() 的功能来在禁用的布尔属性之间切换
jQuery 有一个切换开关，但仅用于切换可见性：api.jquery.com/toggle 我不知道用于禁用/启用的 jQuery 内置切换开关，但您可以查看它们中的所有效果文档：api.jquery.com/category/effects
Jquery toggle input disabled attribute的可能重复
Toggle input disabled attribute using jQuery的可能重复

标签： jquery

【解决方案1】：

您应该使用.prop 禁用：

$("#menuContinenti").prop('disabled', function () {
   return ! $(this).prop('disabled');
});

更新：没有意识到当前属性值是函数的参数；这个版本更干净：

$("#menuContinenti").prop('disabled', function (_, val) { return ! val; });

更新：ES2015

$("#menuContinenti").prop("disabled", (_, val) => !val);

【讨论】：

它又好又短。不过，使用.prop 有什么好处？我不了解自己，但我喜欢你的代码的简短性。
不错。我从没想过要那样做。
@FrançoisWahl prop 是 DOM 对象的属性，而 attr 是序列化的 HTML。恐怕我不知道太多细节，只是使用.attr 禁用/检查可能不会像你期望的那样工作。 jQuery 的 API 专门使用 .prop 进行推荐。引用：“应该使用 .prop() 方法来设置禁用和检查，而不是 .attr() 方法。”
@ExplosionPills：+1 不错，感谢您回复。
@LorenzoC，过早的优化是万恶之源。鉴于 JS 是一种异步语言，大部分时间都花在了空闲上，只需要很少的时间进行计算。如果您发现某段代码太慢而导致问题，那么您应该进行基准测试并修复它。否则，专注于编写可读的代码。

【解决方案2】：

你可以编写自己的插件来做这样的事情。

在 jQuery 之后添加，最好在脚本文件中。

(function($) {
    $.fn.toggleDisabled = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);

然后像这样使用它：

$('#my-select').toggleDisabled();

礼貌：Toggle input disabled attribute using jQuery

【讨论】：

【解决方案3】：

您可以使用如下所示的 $.is 函数进行检查

$("#filtri").change(function(){
    $("#menuContinenti").attr("disabled", ! $(this).is(':checked'));    
});

【讨论】：