How do disable bootstrap radio button?

Question

I would like to 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 is the jquery to do it:

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

But I still see that one can click it, and I retrieve as a checked element!

See jsfiddle

Answer 1

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

pass disabled attribute to 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 is selected!");
   else
     console.log("none are 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 : This only prevents it to show you its click event but if you need to prevent it completely from click pass pointer-events:none to disabled label in css