JQuery 仅启用值为 True 的按钮答案

【问题标题】：JQuery enable only button with value of TrueJQuery 仅启用值为 True 的按钮
【发布时间】：2017-02-02 20:02:49
【问题描述】：

我得到以下 HTML 代码：

<button type="button" class="btn btn-primary jumbotron-td-enable-button enb btnEnable" value="<%= enables[i]%>">
  Enable
</button>

这个按钮是通过动态拉取json文件上的数据来呈现的，因此我得到了以下值value="<%= enables[i] %>

这是我的 javascript：

$(".btnEnable").each(function() {
    var isEnable = $(this).val();
    if (isEnable == 'FALSE') {
        $(".enb").attr("disabled", true);
    }
});

我的问题是它对所有按钮都做了，例如按钮的值是这样的：

FALSE
TRUE
TRUE
FALSE

所以我只想禁用 FALSE 按钮。我确实尝试过使用 ID，它做了我想要的，但问题是它只获得第一个 FALSE 值而不是另一个

【问题讨论】：

标签： javascript jquery html ejs

【解决方案1】：

问题是因为$('.enb') 将选择所有按钮。相反，您应该在each() 调用中使用this 关键字来引用迭代中的当前按钮。试试这个：

$(".btnEnable").each(function() {
    var isEnable = $(this).val();
    $(this).prop("disabled", isEnable == 'FALSE');
});

注意这里使用了prop()，因为您可以为其提供一个布尔值，该值适用于isEnable 的任一状态，这意味着您可以删除if 条件。

【讨论】：

【解决方案2】：

你快到了 - 你得到了当前按钮的值

$(this).val();

其中的重要因素是“这个”。它指的是作为 .each 循环当前迭代的主题的元素。

所以要只改变当前按钮的 disabled 属性，同样的原则也适用：

$(".enb").attr("disabled", true);

应该变成

$(this).attr("disabled", true);

如您所见，使用 .enb 选择器会禁用所有具有“enb”类的按钮。

为了进一步完善它，jQuery 文档建议您使用 .prop() 而不是 .attr() 来设置此类属性（假设您的 jQuery 版本 >=1.6）

$(this).prop("disabled", true);

【讨论】：

【解决方案3】：

您可以将.enb 替换为$(this)

.enb 将选择所有匹配的元素。 $(this) 将只选择当前循环中的一个。

$(".btnEnable").each(function() {
    var isEnable = $(this).val();
    if (isEnable == 'FALSE') {
        $(this).attr("disabled", "disabled");
        //$(this).prop("disabled", true);
    }
});

【讨论】：