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
Post a Comment