CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
David Kirkby
David Kirkby

Reputation: 202

Disable radio button in bootstrap 3?

How can I disable Bootstrap 3 radio buttons? If I start with the BS3 example and add disabled="disabled" to each input element, there are no changes in appearance or behavior:

<div class="container">
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked disabled="disabled">Radio 1 (preselected)</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off" disabled="disabled">Radio 2</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off" disabled="disabled">Radio 3</label>
</div>

Demo: JSFiddle.

I guess this is because the disabled attribute is only applied to the now-invisible button and not the clickable text label, but I don't see anything in the BS3 docs about this.

Upvotes: 16

Views: 33516

Answers (5)

Georgios Syngouroglou
Georgios Syngouroglou

Reputation: 19944

You can use the above to disable an input[type='radio'] that is inside a label (bootstrap 3 style),

$("input[name='INPUT_RADIO_NAME']").prop("disabled", true);
$("input[name='INPUT_RADIO_NAME']").closest("div").css("pointer-events", "none");

The above to enable again,

$("input[name='INPUT_RADIO_NAME']").prop("disabled", false);
$("input[name='INPUT_RADIO_NAME']").closest("div").css("pointer-events", "auto");

You can also extend JQuery and create a dummy disable method (that you could upgrade with more functionality) like this,

(function ($) {
    $.fn.disableMe = function () {
        // Validate.
        if ($.type(this) === "undefined")
            return false;

        // Disable only input elements.
        if ($(this).is("input") || $(this).is("textarea")) {
            // In case it is a radio inside a label.
            if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) {
                $("input[name='safeHtml']").closest("label").addClass("disabled");
                $(this).closest("div").css("pointer-events", "none");
            }

            // General input disable.
            $(this).prop("disabled", true);
        }
    };
    $.fn.enableMe = function () {
        // Validate.
        if ($.type(this) === "undefined")
            return false;

        // Enable only input elements.
        if ($(this).is("input") || $(this).is("textarea")) {
            // In case it is a radio inside a label.
            if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) {
                $("input[name='safeHtml']").closest("label").removeClass("disabled");
                $(this).closest("div").css("pointer-events", "auto");
            }

            // General input enable.
            $(this).prop("disabled", false);
        }
    };
    $.fn.toggleDisable = function () {
        if ($.type(this) === "undefined")
            return false;

        // Toggle only input elements.
        if ($(this).is("input") || $(this).is("textarea")) {
            var isDisabled = $(this).is(":disabled");

            // In case it is a radio inside a label.
            if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) {
                $("input[name='safeHtml']").closest("label").toggleClass("disabled");
                $(this).closest("div").css("pointer-events", isDisabled ? "auto" : "none");
            }

            // General input enale.
            $(this).prop("disabled", !isDisabled);
        }
    };
}(jQuery));

Usage example,

$("input[name='INPUT_RADIO_NAME']").disableMe();
$("input[name='INPUT_RADIO_NAME']").enableMe();
$("input[name='INPUT_RADIO_NAME']").toggleDisable();

Upvotes: 1

Rana Aalamgeer
Rana Aalamgeer

Reputation: 712

In bootstrap if you want to disabled any input type or button, You just have to add bootstrap's .disabled class then your button become disabled.

Like this

<input type="radio" class="btn btn-primary disabled">Primary Button</button>

Upvotes: -1

Ederico Rocha
Ederico Rocha

Reputation: 250

For radio button groups, add class disabled to the one you wish disabled. Make sure you have something like this code: 

$('.btn-group').on("click", ".disabled", function(event) {
    event.preventDefault();
    return false;
});

This will get all your .disabled classed buttons inside the button groups also disabled. This works also for radio type button groups.

Upvotes: 6

ortonomy
ortonomy

Reputation: 692

As mentioned by @giammin in the comments to the accepted answer, setting 'disabled' on the input elements doesn't work in 3.3.6 of bootstrap. (Current version at time of publication of this answer).

I was having exactly the same issue, and my solution was to use the CSS property "pointer events". This makes sure the element and children are never a target of click events. However this is not a foolproof solution - users can still tab in and use space to click the hidden elements on a desktop browser.

.disabled-group
{
    pointer-events: none;
}

If you set this on your '.btn-group' element, you'll completely disable 

<div class="btn-group disabled-group" data-toggle="buttons">
   <label class="btn btn-primary disabled">
      <input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked)
   </label>
   <label class="btn btn-primary disabled">
      <input type="checkbox" autocomplete="off"> Checkbox 2
   </label>
   <label class="btn btn-primary disabled">
     <input type="checkbox" autocomplete="off"> Checkbox 3
   </label>
</div>

The '.disabled' class is then optional - use it for graying out and 'cursor: not-allowed;' property.

The discussion of the fix solution is at this source: https://github.com/twbs/bootstrap/issues/16703

Upvotes: 9

Dhiraj
Dhiraj

Reputation: 33618

Add disabled class to the label like this 

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary active disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

Here is a demo

Upvotes: 24

Related Questions