0

您好我正在尝试在用户提交时禁用所有按钮，因此在页面加载时他们无法再次提交或执行其他操作。但是该页面可能也已经有禁用的按钮，所以我不能简单地做

$('.btn').attr('disabled', 'disabled');

然后

$('.btn').removeAttr('disabled');

如果表单未通过不显眼的验证，我将不得不再次启用按钮。

在 twitter-bootstrap 中有 .button('loading') 和 .button('reset') 但它用“正在加载”替换按钮文本，我更喜欢它们被禁用。

有没有一种简单的方法可以做到这一点？

4

5 回答 5

1

找到那些还没有被禁用的，给他们一个类并禁用它们：

$('.btn').filter(function() {
   return !this.disabled;
}).addClass('disabled_now').prop('disabled', true);

要再次启用它们，您可以：

$('.disabled_now').removeClass('disabled_now').prop('disabled', false);
于 2013-05-23T22:40:38.613 回答
1

由于 jQuery 是流利的，所以调用

$('.btn').attr('disabled', 'disabled');

返回更改项的数组。你可以像这样存储它：

var disabledBtns = $('.btn').attr('disabled', 'disabled');

更新

由于您只想获取尚未禁用的按钮，请像这样过滤它们：

var disabledBtns = $('.btn:not(:disabled)').attr('disabled', 'disabled');

这样您就可以保存和禁用已启用的按钮。

于 2013-05-23T22:40:47.507 回答
1

尝试 ：

var $non_disabled_buttons = $('.btn').filter(function() {
    return !$(this).is(':disabled');
}).attr('disabled', true);

然后重新启用它们：

$non_disabled_buttons.attr('disabled', false);
于 2013-05-23T22:40:52.633 回答
0

假设您使用的是 jQuery 1.6 及更高版本。您应该使用该.prop()方法

$(".btn").prop('disabled', false);
$(".btn").prop('disabled', true);
于 2013-05-24T00:43:58.750 回答
0

虽然其他答案有优点，但它们使用变量来存储禁用对象的列表。这对我来说似乎有点不雅，因为 DOM 可以在不同时间修改，这可能会使存储在 JS 变量中的控制列表等内容失效。

我的解决方案是将一个类应用于您要禁用的按钮，并在您想再次启用它们时在 jQuery 选择器中使用该类。就像是：

// disable buttons
$(':button').not('[disabled]').addClass("dis_temp").attr("disabled","disabled");

// do something
//...

// enable buttons disabled above
$('.dis_temp').attr("disabled", null).removeClass("dis_temp");

使用 DOM 类对对象进行分组似乎是相当普遍的做法。

在大多数情况下，我更喜欢单独保留按钮并使用模态 jQueryUI 对话框。我猜这是风格问题。

于 2013-05-23T23:39:00.460 回答