禁用单选按钮组中的按钮

Question

I have a radio button group and I would like to dynamically enable/disable buttons.

This is the radio button group code:

 $("#option1").prop("disabled", true); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div style="clear: both; display: inline;"> <div class="btn-group" data-toggle="buttons"> <label id="option1label" class="btn btn-info active"> <input type="radio" class="check" name="options" id="option1" checked>1 </label> <label id="option2label" class="btn btn-info"> <input type="radio" class="check" name="options" id="option2">2 </label> <label id="option3label" class="btn btn-info"> <input type="radio" class="check" name="options" id="option3">3 </label> </div> </div> 

I have tried all these options below:

$("#option1").prop("disabled", true);

$("#option1").attr("disabled", "disabled");

$("#option1label").attr("disabled", "disabled");

but none of them work. With the last one the buttons look disabled, but you can still click on them and trigger events.

Any ideas appreciated :)

Answer 1

You jquery selector focuses only first input. Use a selector wich include all the radio of your group, for example:

 $(".btn-group input[type='radio']").prop("disabled", true); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="clear: both; display: inline;"> <div class="btn-group" data-toggle="buttons"> <label id="option1label" class="btn btn-info active"> <input type="radio" class="check" name="options" id="option1" checked>1 </label> <label id="option2label" class="btn btn-info"> <input type="radio" class="check" name="options" id="option2">2 </label> <label id="option3label" class="btn btn-info"> <input type="radio" class="check" name="options" id="option3">3 </label> </div> </div> 

Answer 2

In order to disable a bootstrap radio button in a group you need to disable the corresponding label and you need to handle click events for the disabled label.

 $(function () { // for only one radio button $("#option1").closest('label').attr("disabled", 'disabled'); // for all radio //$(":radio").closest('label').attr("disabled", 'disabled'); // // On click event check if current label is disabled. // If disabled, stop all. // $('.btn-group label').on('click', function(e) { if ($(this).is('[disabled]')) { e.preventDefault(); e.stopImmediatePropagation(); } }); $('#btnInfo').on('click', function (e) { var txt = $(':radio:checked').length == 1 ? 'Checked radio is: ' + $(':radio:checked').attr('id') : 'No radio checked' console.log(txt); }); $("input[name='options']").closest('label').click(function (e) { console.log('Lbale ' + this.id + ' Clicked!'); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div style="clear: both; display: inline;"> <div class="btn-group" data-toggle="buttons"> <label id="option1label" class="btn btn-info active"> <input type="radio" class="check" name="options" id="option1">1 </label> <label id="option2label" class="btn btn-info"> <input type="radio" class="check" name="options" id="option2" checked>2 </label> <label id="option3label" class="btn btn-info"> <input type="radio" class="check" name="options" id="option3">3 </label> </div> </div> <button id="btnInfo" type="button" class="btn btn-primary">Show currently checked radio button</button> 

Answer 3

你试过这个吗？

$('input[name= options]').attr("disabled",true);