Nút radio Bootstrap "kiểm tra" cờ

Question

Trong trường hợp # 1 hoạt động, trong trường hợp # 2 nó không hoạt động. Kiểm tra dưới mã:

<div class="container"> 
    <div class="row"> 
     <h1>Radio Group #1</h1> 
     <label class="radio-inline"> 
      <input name="radioGroup" id="radio1" value="option1" type="radio"> 1 
     </label> 
     <label class="radio-inline"> 
      <input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2 
     </label> 
     <label class="radio-inline"> 
      <input name="radioGroup" id="radio3" value="option3" type="radio"> 3 
     </label> 
    </div> 
    <div class="row"> 
     <h1>Radio Group #2</h1> 
     <label for="year" class="control-label input-group">Year</label> 
     <div class="btn-group" data-toggle="buttons"> 
      <label class="btn btn-default"> 
       <input name="year" value="2011" type="radio">2011 
      </label> 
      <label class="btn btn-default"> 
       <input name="year" value="2012" type="radio">2012 
      </label> 
      <label class="btn btn-default"> 
       <input name="year" value="2013" checked="checked" type="radio">2013 
      </label> 
     </div> 
    </div> 
</div> 

Bạn có thể nhìn thấy nó trong hành động ở đây: http://bootply.com/84165

Answer 1

Giả sử bạn muốn có một nút mặc định kiểm tra.

<div class="row"> 
    <h1>Radio Group #2</h1> 
    <label for="year" class="control-label input-group">Year</label> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"> 
      <input type="radio" name="year" value="2011">2011 
     </label> 
     <label class="btn btn-default"> 
      <input type="radio" name="year" value="2012">2012 
     </label> 
     <label class="btn btn-default active"> 
      <input type="radio" name="year" value="2013" checked="">2013 
     </label> 
    </div> 
    </div> 

Thêm lớp active nút (label tag) bạn muốn defaulted và checked="" vào thẻ input của nó để nó được gửi dưới dạng theo mặc định.

Answer 2

Một sửa chữa javascript để áp dụng các lớp 'hoạt động' cho tất cả các nhãn mà là cha mẹ của đầu vào kiểm tra:

$(':input:checked').parent('.btn').addClass('active'); 

chèn ngay sau khi

$('.btn').button(); 

Answer 3

Sử dụng hoạt động lớp với nhãn để làm cho nó tự động lựa chọn và sử dụng checked="".

<label class="btn btn-primary active" value="regular" style="width:47%"> 
    <input type="radio" name="service" checked="" > Regular </label> 
    <label class="btn btn-primary " value="express" style="width:46%"> 
    <input type="radio" name="service"> Express </label> 

Answer 4

Bạn phải sử dụng hoạt động trong nhãn để làm cho nó hoạt động như đã đề cập ở trên. Nhưng bạn có thể sử dụng checked = "checked" và nó cũng sẽ hoạt động. Nó không cần thiết nhưng nó dễ đọc hơn và có ý nghĩa hơn vì nó tuân thủ nhiều định dạng html hơn.