Vô hiệu hóa nút radio trong bootstrap 3?

Question

Làm cách nào để tắt các nút radio Bootstrap 3? Nếu tôi bắt đầu với BS3 example và thêm disabled="disabled" cho mỗi yếu tố đầu vào, không có thay đổi về ngoại hình hay hành vi:

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

Demo: JSFiddle. Tôi đoán điều này là do thuộc tính bị vô hiệu hóa chỉ được áp dụng cho nút hiện đang ẩn và không phải là nhãn văn bản có thể nhấp, nhưng tôi không thấy bất kỳ điều gì trong tài liệu BS3 về điều này.

Answer 1

Thêm disabled lớp để nhãn như thế này

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

Đây là một demo

Answer 2

Như đã đề cập bởi @giammin trong các ý kiến ​​để trả lời chấp nhận, thiết lập 'disabled' trên các yếu tố đầu vào doesn' t làm việc trong 3.3.6 của bootstrap. (Phiên bản hiện tại tại thời điểm công bố câu trả lời này).

Tôi đã có chính xác cùng một vấn đề và giải pháp của tôi là sử dụng thuộc tính CSS "sự kiện con trỏ". Điều này đảm bảo yếu tố và trẻ em không bao giờ là mục tiêu của các sự kiện nhấp chuột. Tuy nhiên, đây không phải là giải pháp dễ sử dụng - người dùng vẫn có thể tab và sử dụng không gian để nhấp vào các phần tử ẩn trên trình duyệt trên máy tính để bàn.

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

Nếu bạn đặt này trên yếu tố '.btn nhóm' của bạn, bạn sẽ hoàn toàn vô hiệu hóa

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

Các '.disabled' lớp là sau đó tùy chọn - sử dụng nó cho chuyển sang màu xám và 'con trỏ: không được phép;' bất động sản.

Việc thảo luận các giải pháp khắc phục là tại nguồn này: https://github.com/twbs/bootstrap/issues/16703

Answer 3

Đối với nhóm nút radio, thêm lớp vô hiệu hóa đến một trong những bạn muốn người tàn tật. Hãy chắc chắn rằng bạn có một cái gì đó giống như mã này:

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

này sẽ nhận được tất cả .disabled nút phân loại của bạn bên trong nhóm nút cũng bị vô hiệu hóa. Điều này cũng làm việc cho các nhóm nút radio loại.

Answer 4

Trong bootstrap nếu bạn muốn vô hiệu hóa bất kỳ loại đầu vào hoặc nút, Bạn chỉ cần thêm lớp khởi động .disabled của bootstrap sau đó nút của bạn bị vô hiệu hóa.

Như thế này

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

Answer 5

Bạn có thể sử dụng ở trên để vô hiệu hóa một đầu vào [type = 'đài phát thanh'] có nghĩa là bên trong một nhãn (bootstrap 3 phong cách),

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

Các ở trên để bật lại,

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

Bạn cũng có thể mở rộng JQuery và tạo giả phương pháp sable (mà bạn có thể nâng cấp với nhiều chức năng hơn) như thế này,

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

dụ Cách sử dụng,

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