CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
patriciasmh
patriciasmh

Reputation: 350

Disable a button in a radio button group

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 :)

Upvotes: 4

Views: 3989

Answers (3)

gaetanoM
gaetanoM

Reputation: 42044

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>

Upvotes: 1

Al Foиce ѫ
Al Foиce ѫ

Reputation: 4315

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>

Upvotes: 1

John
John

Reputation: 4981

Have you tried this ?

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

Upvotes: 0

Related Questions