javascript - How do disable bootstrap radio button? -


i disable choosing bootstrap radio button.

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary btn-set-or-raise">     <input type="radio" name="options" id="option1" val="option1" >radio 1   </label> <label class="btn btn-primary btn-set-or-raise">     <input type="radio" name="options" id="option2" val="option2" >radio 2 </label> <label class="btn btn-primary">     <input type="radio" name="options" id="option3" >radio 3 </label> 

here jquery it:

$(document).ready(function() {     $(".btn-group :input").attr("disabled", true); }); 

but still see 1 can click it, , retrieve checked element!

see jsfiddle

your code working fine disabled attribute there on input radio there still click working on label input radio in inside label.

pass disabled attribute label also

 $(document).ready(function() {     $(".btn-group label").attr("disabled", true);     $(".btn-group :input").attr("disabled", true);   });     function checkselected() {     if ($("input[name=options]:checked").length > 0)       console.log("one selected!");     else       console.log("none selected!");   }
label[disabled]{    pointer-events:none;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    <div class="btn-group" data-toggle="buttons">    <label class="btn btn-primary btn-set-or-raise">      <input type="radio" name="options" id="option1" val="option1">radio 1      </label>    <label class="btn btn-primary btn-set-or-raise">      <input type="radio" name="options" id="option2" val="option2">radio 2    </label>    <label class="btn btn-primary">      <input type="radio" name="options" id="option3">radio 3    </label>  </div>  <input type="button" onclick="checkselected()" value="check selected" />

note : prevents show click event if need prevent click pass pointer-events:none disabled label in css


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -