在bootstrap 3中禁用單選按鈕？

Question

如何禁用Bootstrap 3單選按鈕？ 如果我從BS3示例開始並為每個輸入元素添加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屬性僅應用於now-invisible按鈕而不是可點擊的文本標簽，但我在BS3文檔中沒有看到任何關於此的內容。

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

這是一個演示

Answer 2

正如@giammin在對已接受答案的評論中所提到的，在輸入元素上設置'disabled'在引導程序的3.3.6中不起作用。 （本答復公布時的當前版本）。

我遇到了完全相同的問題，我的解決方案是使用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>

然后' .disabled '類是可選的 - 用它來顯示灰色和'cursor：not-allowed;' 屬性。

修復解決方案的討論來源於： https ： //github.com/twbs/bootstrap/issues/16703

Answer 3

對於單選按鈕組，將禁用的類添加到要禁用的類。 確保你有類似這樣的代碼：

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

這將使按鈕組內的所有.disabled分類按鈕也被禁用。 這也適用於無線電類型按鈕組。

Answer 4

您可以使用上面的方法來禁用標簽內的輸入[type ='radio']（bootstrap 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();

Answer 5

在bootstrap中，如果要禁用任何輸入類型或按鈕，只需添加bootstrap的.disabled類，然后您的按鈕將被禁用。

像這樣

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