Javascript 禁用引导3中的单选按钮？

如何禁用Bootstrap 3单选按钮？如果我从开始并向每个输入元素添加

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>

收音机1（预选）
第二台
第三台

演示：

---

我想这是因为disabled属性只应用于现在不可见的按钮，而不是clickable文本标签，但我在BS3文档中没有看到任何与此相关的内容。

向标签添加

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>

复选框1（预选中）
复选框2
复选框3

---

以下是@giammin在对接受答案的评论中提到的一个

，在bootstrap的3.3.6中，在输入元素上设置“disabled”不起作用。（本答案发布时的当前版本）

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

.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>

复选框1（预选中）
复选框2
复选框3

“.disabled”类是可选的-将其用于灰显和“cursor:not allowed；”财产

修复解决方案的讨论来源如下：

---

对于单选按钮组，将禁用的类添加到希望禁用的类中。 确保您具有类似以下代码的内容：

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

---

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

在引导中，如果要禁用任何输入类型或按钮，只需添加引导的.disabled类，按钮就会被禁用

像这样

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

主按钮

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

再次启用上述功能

$("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();

---

您需要将禁用的类添加到禁用的类中！那好多了！当按钮被禁用时，是否有任何方法指示检查的状态？看起来活动类和checked属性被忽略了。是的，引导程序似乎不同时支持这两个属性。可能您必须为此编写自定义样式。此解决方案在3.3.4到3.3.6版本中不起作用。它应该在3.3.7中修复。输入似乎已禁用，但会响应单击。我花了半个小时才弄明白这件事…@giammin谢谢你。为了暂时避开这个bug，我在禁用的标签上挂起一个click函数并返回false。这似乎管用。@frax好提示。我不认为这个错误在3.3.7中已经修复，所以这是唯一的解决方法。我也浪费了相当多的时间认为它是固定的，但将答案改为指向3.3.7对我来说验证了它没有被固定。我认为不可能使用

指针事件：无
并允许
不允许
光标显示在悬停状态。至少，如果没有一些JS魔法，我是做不到的。@self.-你是对的，不是。这是两者之间的权衡。但我发现指针事件更可靠。当然，也有人指出，您的用户也可以将选项卡切换到禁用的选项。
$("input[name='INPUT_RADIO_NAME']").disableMe();
$("input[name='INPUT_RADIO_NAME']").enableMe();
$("input[name='INPUT_RADIO_NAME']").toggleDisable();