Vô hiệu hoá Nhóm Nút Khởi động Twitter

Question

Tôi có một nhóm nút trên một trang được sử dụng để lựa chọn. Sau khi lựa chọn được thực hiện, tôi muốn nhóm nút vẫn hiển thị để người dùng có thể thấy lựa chọn mà họ đã thực hiện, nhưng tôi không muốn họ có thể sử dụng nó nữa. Có cách nào để vô hiệu hóa nhóm nút không?

<div class="btn-group-vertical"> 
    <button type="button" class="btn btn-primary btn-lg">Option 1</button> 
    <button type="button" class="btn btn-primary btn-lg">Option 2</button> 
    <button type="button" class="btn btn-primary btn-lg">Option 3</button> 
</div> 

Answer 1

Bạn có thể sử dụng thuộc tính bị vô hiệu hóa trên các nút để tắt việc sử dụng chúng, as described in the Bootstrap docs. Về cơ bản nó liên quan đến việc thêm thuộc tính 'disabled' vào phần tử nút, như vậy;

<div class="btn-group-vertical"> 
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 1</button> 
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 2</button> 
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 3</button> 
</div> 

Bạn có thể sử dụng jQuery để tự động thêm thuộc tính này khi bạn đã thực hiện bất cứ điều gì bạn muốn làm

$('.btn-group-vertical button').attr('disabled','disabled'); 

Và nếu bạn muốn kích hoạt lại nó

$('.btn-group-vertical button').removeAttr('disabled'); 

Gấu lưu ý rằng ở trên sẽ áp dụng hành vi này cho tất cả các nhóm nút có tên lớp này. Nếu bạn không muốn, bạn sẽ cần phải thêm một ID vào nhóm btn div và sử dụng nó trong bộ chọn jQuery.

Answer 2

Tôi muốn giữ phong cách quá, Vì vậy, tôi rời khỏi lĩnh vực khuyết tật và chỉ phản tác dụng hành động CSS với một lớp mới display-only:

<div class='btn-group display-only' data-toggle='buttons'>  
    <label class='btn btn-default button-array'>Friday PM</label> 
    <label class='btn btn-default button-array'>Saturday AM</label> 
    <label class='btn btn-default button-array'>Graduation</label> 
    <label class='btn btn-default button-array'>Saturday PM</label> 
    <label class='btn btn-default button-array'>Sunday AM</label> 
    <label class='btn btn-default button-array'>Sunday PM</label> 
    <label class='btn btn-default button-array'>Monday AM</label> 
</div> 

Và CSS:

.btn-group.display-only label.btn { 
    pointer-events: none; 
    cursor: not-allowed; 
} 
.btn-group.display-only label.btn.active { 
    opacity: 1; 
    color: #333; 
    background-color: #e6e6e6; 
    border-color: #adadad;webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 
} 

.. Có vẻ làm việc tốt cho tôi.