在使用输入/按钮's在Twitter Boostrap中

Do we need this whilst using input/button's in Twitter Boostrap?

本文关键字：Twitter Boostrap 输入 按钮      更新时间：2023-09-26

例如，对于所有input:button、input:submit、button:button、button:submit，我们都有Twitter的Bootstrap提供的这些类：

  • disabled
  • btn-disabled

然后，我们可以使用HTML属性禁用这些按钮，如下所示：

  • <input type="button" disabled="disabled" />，或
  • <button type="submit" disabled="disabled"></button>

你也可以使用这个模式与引导：

  • <input type="button" class="btn btn-disabled" disabled="disabled" />，或
  • <button type="submit" class="btn disabled"></button>

无论是否具有disabled="disabled"属性，按钮都将显示为禁用状态，并提供任何类：disabled或btn-disabled。

所以我实际上有两个问题：

  1. 为什么我们需要这些混合属性的类
  2. 在使用Twitter的Bootstrap时，如何使用jQuery切换（启用/禁用）这些

EDIT（我的jQuery示例，用于切换按钮的状态）：

$(document).ready(function() {
    $('a#disable').click(function() {
       $('button').attr('disabled', 'disabled');
       $('button').prop('disabled', true);
       $('button').addClass('btn-disabled');
       $('button').addClass('disabled');
    });
    $('a#enable').click(function() {
       $('button').removeAttr('disabled');
       $('button').prop('disabled', false);
       $('button').removeClass('btn-disabled');
       $('button').removeClass('disabled');
    });
    // Do we really need this just to disable/enable the button?
});

PS我知道我可以在属性中使用disabled，但这不是我的习惯。

对于"真实"按钮，如input:button或button，您将使用属性disabled="disabled"。不需要.disabled类。

据我所知，.disabled类的存在使得使用.btn类显示为按钮的a标记也被禁用，所以我只在该上下文中使用.disabled。

虽然我并不是非常熟悉每一个Bootstrap类，但在Bootstrap文档中关于按钮的任何部分都没有提到.btn-disabled。

因此，对于输入和按钮，请执行以下操作：

$('a#disable').click(function() {
   $('button').prop('disabled', true);
});

对于看起来像按钮的<a>，请执行以下操作：

$('a#disable').click(function() {
   $('a#myButton').addClass('disabled');
});

请参阅Bootstrap文档，了解每个案例的一个非常清晰的示例。

PS-您不需要同时使用.prop()和.attr()，因为它们基本上做相同的事情。只要您至少使用jQuery 1.6，.prop()就可以了。

相关文章：