在引导程序 3 中禁用单选按钮？答案

【问题标题】：Disable radio button in bootstrap 3?在引导程序 3 中禁用单选按钮？
【发布时间】：2015-03-29 15:50:30
【问题描述】：

如何禁用 Bootstrap 3 单选按钮？如果我从BS3 example 开始并在每个输入元素中添加disabled="disabled"，则外观或行为没有变化：

<div class="container">
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked disabled="disabled">Radio 1 (preselected)</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off" disabled="disabled">Radio 2</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off" disabled="disabled">Radio 3</label>
</div>

演示：JSFiddle.

我猜这是因为 disabled 属性仅适用于现在不可见的按钮而不是可点击的文本标签，但我在 BS3 文档中没有看到任何关于此的内容。

【问题讨论】：

你需要将禁用的类添加到禁用的类中！

标签： javascript html twitter-bootstrap

【解决方案1】：

像这样在标签中添加disabled类

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary active disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

这是demo

【讨论】：

这样好多了！有什么方法可以指示禁用按钮时检查的状态？看起来活动类和检查属性被忽略了。
是的，bootstrap 似乎不能同时支持两者。可能您必须为此编写自定义样式
此解决方案在 3.3.4 至 3.3.6 版本中不起作用，应在 3.3.7 中修复。 github.com/twbs/bootstrap/issues/16703 输入似乎已禁用，但响应点击。我花了半个小时才弄清楚这个......
@giammin 谢谢。为了暂时解决这个错误，我在禁用的标签上连接了一个点击功能并返回 false。这似乎行得通。
@frax 好提示。我不认为该错误在 3.3.7 中已修复，因此这是唯一的解决方法。我也花了很多时间认为它已修复，但将答案的小提琴更改为指向 3.3.7 对我来说验证它尚未修复。

【解决方案2】：

正如@giammin 在 cmets 中提到的接受的答案，在输入元素上设置“禁用”在引导程序的 3.3.6 中不起作用。（发布此答案时的当前版本）。

我遇到了完全相同同样的问题，我的解决方案是使用 CSS 属性“pointer events”。这确保元素和子元素永远不会成为点击事件的目标。然而，这不是一个万无一失的解决方案 - 用户仍然可以在桌面浏览器上使用 tab 键并使用空间来单击隐藏的元素。

.disabled-group
{
    pointer-events: none;
}

如果你在你的 '.btn-group' 元素上设置这个，你会完全禁用

<div class="btn-group disabled-group" data-toggle="buttons">
   <label class="btn btn-primary disabled">
      <input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked)
   </label>
   <label class="btn btn-primary disabled">
      <input type="checkbox" autocomplete="off"> Checkbox 2
   </label>
   <label class="btn btn-primary disabled">
     <input type="checkbox" autocomplete="off"> Checkbox 3
   </label>
</div>

'.disabled' 类是可选的 - 将其用于灰显和“光标：不允许；”属性。

修复解决方案的讨论在此来源： https://github.com/twbs/bootstrap/issues/16703

【讨论】：

我认为不能使用 pointer-events: none 并允许在悬停时显示 not-allowed 光标。至少，如果没有一些 JS 魔法，我是做不到的。
@self。 - 你是对的，它不是。这是一个与另一个之间的权衡。但我发现指针事件更可靠。当然，也有人指出，您的用户也可以通过 alt-tab 切换到禁用的选项。

【解决方案3】：

对于单选按钮组，将禁用的类添加到您希望禁用的类。确保你有类似这样的代码：

$('.btn-group').on("click", ".disabled", function(event) {
    event.preventDefault();
    return false;
});

这将使按钮组内的所有 .disabled 分类按钮也被禁用。这也适用于单选按钮组。

【讨论】：

【解决方案4】：

您可以使用上述方法禁用标签内的输入[type='radio']（引导 3 样式），

$("input[name='INPUT_RADIO_NAME']").prop("disabled", true);
$("input[name='INPUT_RADIO_NAME']").closest("div").css("pointer-events", "none");

以上再次启用，

$("input[name='INPUT_RADIO_NAME']").prop("disabled", false);
$("input[name='INPUT_RADIO_NAME']").closest("div").css("pointer-events", "auto");

您还可以像这样扩展 JQuery 并创建一个虚拟禁用方法（您可以升级为更多功能），

(function ($) {
    $.fn.disableMe = function () {
        // Validate.
        if ($.type(this) === "undefined")
            return false;

        // Disable only input elements.
        if ($(this).is("input") || $(this).is("textarea")) {
            // In case it is a radio inside a label.
            if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) {
                $("input[name='safeHtml']").closest("label").addClass("disabled");
                $(this).closest("div").css("pointer-events", "none");
            }

            // General input disable.
            $(this).prop("disabled", true);
        }
    };
    $.fn.enableMe = function () {
        // Validate.
        if ($.type(this) === "undefined")
            return false;

        // Enable only input elements.
        if ($(this).is("input") || $(this).is("textarea")) {
            // In case it is a radio inside a label.
            if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) {
                $("input[name='safeHtml']").closest("label").removeClass("disabled");
                $(this).closest("div").css("pointer-events", "auto");
            }

            // General input enable.
            $(this).prop("disabled", false);
        }
    };
    $.fn.toggleDisable = function () {
        if ($.type(this) === "undefined")
            return false;

        // Toggle only input elements.
        if ($(this).is("input") || $(this).is("textarea")) {
            var isDisabled = $(this).is(":disabled");

            // In case it is a radio inside a label.
            if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) {
                $("input[name='safeHtml']").closest("label").toggleClass("disabled");
                $(this).closest("div").css("pointer-events", isDisabled ? "auto" : "none");
            }

            // General input enale.
            $(this).prop("disabled", !isDisabled);
        }
    };
}(jQuery));

使用示例，

$("input[name='INPUT_RADIO_NAME']").disableMe();
$("input[name='INPUT_RADIO_NAME']").enableMe();
$("input[name='INPUT_RADIO_NAME']").toggleDisable();

【讨论】：

【解决方案5】：

在引导程序中，如果您想禁用任何输入类型或按钮，您只需添加引导程序的 .disabled 类，然后您的按钮就会被禁用。

喜欢这个

<input type="radio" class="btn btn-primary disabled">Primary Button</button>

【讨论】：