Question

我希望在页面加载时禁用引导按钮。我知道我可以通过$().button('loading')以编程方式将其切换到禁用状态，但在呈现按钮未被禁用时会有一段短暂的时间。如何在默认情况下禁用它？

禁用时，bootstraps按钮具有禁用的类和属性。

<button class="btn btn-primary disabled" disabled="disabled" data-loading-text="Loading...">Click Me</button>

我可以添加额外的类和属性，但我仍然是如何告诉bootstrap正常状态和禁用文本是什么的问题。如果我在页面加载时禁用它，我需要一个data-normal-text属性，但似乎不是那样的。

Answer 1

我不完全理解这个问题，但我想你可以这样做：

<button class="btn btn-primary disabled" disabled="disabled">
  Loading...
</button>

它已被禁用，现在当你准备就绪时，你可以：

$(document).ready(function()
{
  $('button.disabled[disabled=disabled]')
    .removeClass('disabled')
    .prop('disabled', false)
    .text('Click Me');
});

我没有使用button()方法，所以没有答案。从UI / UX的角度来看，这并非100％最优，但在功能上它应该是100％并且仍然具有非常好的用户体验。

Answer 2

实际上有一种方法可以通过DOM属性定义自己的文本。引自Bootstrap Button docs：

使用您喜欢的任何州！

为了进行此演示，我们使用的是data-loading-text和$().button('loading')，但这样做了   不是唯一可以使用的州。请参阅下面的详细信息   $().button(string)文档。

因此，我可以添加data-ready-text="Click Me"并将其与$().button('ready')切换。但是，这并没有消除按钮的禁用状态;我仍然必须自己做。

值得注意的是，加载状态是禁用按钮的特殊状态。无法告诉Bootstrap您希望自定义状态也禁用该按钮。同样，你必须手动完成。

如何在页面加载时将Bootstrap按钮置于禁用状态？

2 个答案: