Bootstrap Tutorial

Bootstrap Fixed Navbar | Sticky Top | Sticky Header Bootstrap CDN 5.3, 5.2, 4.6, 4.3, 3.4, 3.3 (New Links) | Bootstrap CDN 5, 4, 3 File Download Bootstrap 5 Modal Disable Outside Click Bootstrap Horizontal and Vertical Divider Bootstrap Modal Pass data Dynamically Bootstrap Confirm Delete Modal | Popup Bootstrap Add Space Between Rows | Margin Bootstrap Remove Modal Background Bootstrap Make Table Row Clickable Bootstrap Change modal background color Bootstrap Center Align Form Bootstrap Show Image in Modal | Popup Bootstrap Button Icon with Text Bootstrap Scrollable Modal Bootstrap Image Center Align Bootstrap Dropdown with Icon Bootstrap Get Checkbox checked value Bootstrap Uncheck radio Button Bootstrap Set Radio button default checked or selected Bootstrap Radio Button Validation Bootstrap Enable Disable Radio Button Bootstrap Radio Button Checked Event Bootstrap get radio button checked or selected value Bootstrap Disable Enable Button on Click Bootstrap Tooltip on Input Field Elements Bootstrap Fixed Footer Bootstrap Image Upload | file Upload Bootstrap Modal on page load Bootstrap Login Form Template Bootstrap Add Search icon with Search bar Bootstrap button tooltip on hover Bootstrap Icons CDN Latest Version (1.11.3) Bootstrap Tabs Panel Pass dynamic content Bootstrap Change Dropdown Menu Background Color Bootstrap Avoid Dropdown Menu to close menu items on clicking inside Bootstrap Table Remove Border Bootstrap Modal Example Bootstrap Center Align Input Field Bootstrap Change Icon Color Bootstrap Text Align Center | Middle Bootstrap Remove all Rounded Corners Bootstrap Alerts Example Bootstrap Alert with Icons Bootstrap Scroll to Top Button Bootstrap Button Loading Spinner Bootstrap Check if Modal is Shown or Hidden Bootstrap Dropdown Button Change Text on Selection Bootstrap Remove offcanvas Backdrop Bootstrap Textarea Height Auto Resize Bootstrap selectpicker Get Selected Value Glyph Trash Icon

Bootstrap Enable Disable Radio Button

Bootstrap Enable Disable Radio Button:To enable or disable a radio button using different methods, you can utilize either the disabled attribute, jQuery, or JavaScript.

The disabled attribute can be directly applied to the radio button element, setting it to true or false to enable or disable it. In jQuery, you can select the radio button and use the prop function to set the disabled property accordingly.

Similarly, in JavaScript, you can target the radio button element and modify its disabled property using the disabled attribute or the setAttribute method.

These approaches allow you to control the functionality of the radio button based on your requirements.

written

reviewed

updated

How can the "disabled" attribute be used to enable or disable a radio button in Bootstrap?

The code provided demonstrates how to enable and disable radio buttons using the "disabled" attribute in Bootstrap. The first radio button with the ID "red" is disabled by adding the "disabled" attribute to the input element.

The second radio button with the ID "blue" is enabled by default since it does not have the "disabled" attribute. This allows users to select the enabled radio button but not the disabled one.

Bootstrap Enable Disable Radio Button - Using Disabled attribute

<body>
    <div class="container mt-4">
        <h3>Bootstrap Enable Disable Radio Button</h3>
        <!-- Disabled radio button -->
        <div class="form-check">
            <input class="form-check-input" type="radio" name="color" id="red" value="red" disabled>
            <label class="form-check-label" for="red">
                Red
            </label>
        </div>
        <!-- Enabled radio button -->
        <div class="form-check">
            <input class="form-check-input" type="radio" name="color" id="blue" value="blue">
            <label class="form-check-label" for="blue">
                Blue
            </label>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>

</body>

Run

Output of Bootstrap Enable Disable Radio Button

How can I enable or disable a radio button using jQuery in a Bootstrap-based webpage?

This code demonstrates how to enable or disable radio buttons using jQuery and Bootstrap. Two radio buttons are created with the names "exampleRadio" and IDs "radio1" and "radio2."

The "Enable" and "Disable" buttons have IDs "enableButton" and "disableButton" respectively. When the "Disable" button is clicked, the script disables all radio buttons by setting their "disabled" attribute to true.

Conversely, when the "Enable" button is clicked, the script enables all radio buttons by setting their "disabled" attribute to false.

Bootstrap Enable Disable Radio Button - Using Jquery

<body>
    <div class="container mt-4">
        <h3>Bootstrap Enable Disable Radio Button</h3>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadio" id="radio1" value="option1" checked>
            <label class="form-check-label" for="radio1">
                Option 1
            </label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadio" id="radio2" value="option2">
            <label class="form-check-label" for="radio2">
                Option 2
            </label>
        </div>

        <button class="btn btn-secondary" id="enableButton">Enable</button>
        <button class='btn btn-danger' id="disableButton">Disable</button>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function () {
            // Disable radio buttons
            $('#disableButton').click(function () {
                $('input[type="radio"]').attr('disabled', true);
            });

            // Enable radio buttons
            $('#enableButton').click(function () {
                $('input[type="radio"]').attr('disabled', false);
            });
        });

    </script>

</body>

Run

How can I enable or disable a radio button using JavaScript in a Bootstrap framework?

This HTML code snippet creates a form with three radio buttons representing different hospitals. Two buttons below the form, labeled "Disable" and "Enable," are used to disable and enable the radio buttons, respectively.

The JavaScript functions disableRadioButton() and enableRadioButton() are triggered by the corresponding buttons.

These functions use document.getElementsByName() to retrieve all radio buttons with the name "hospital" and set their disabled property to either true or false to disable or enable them.

Bootstrap Enable Disable Radio Button - Using Javascript

<body>
    <div class="container mt-4">
        <h3>Bootstrap Enable Disable Radio Button</h3>
        <div class="form-check">
            <input class="form-check-input" type="radio" id="radioBtn1" name="hospital"
                value="Massachusetts General Hospital">
            <label class="form-check-label" for="radioBtn1">Massachusetts General Hospital</label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="radio" id="radioBtn2" name="hospital" value="Johns Hopkins Hospital">
            <label class="form-check-label" for="radioBtn2">Johns Hopkins Hospital</label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="radio" id="radioBtn3" name="hospital" value="Mayo Clinic">
            <label class="form-check-label" for="radioBtn3">Mayo Clinic</label>
        </div>

        <div class="mt-3">
            <button class="btn btn-primary mr-2" onclick="disableRadioButton()">Disable</button>
            <button class="btn btn-danger" onclick="enableRadioButton()">Enable</button>
        </div>
    </div>

    <script>
        function disableRadioButton() {
            var radioButtons = document.getElementsByName("hospital");
            for (var i = 0; i < radioButtons.length; i++) {
                radioButtons[i].disabled = true;
            }
        }

        function enableRadioButton() {
            var radioButtons = document.getElementsByName("hospital");
            for (var i = 0; i < radioButtons.length; i++) {
                radioButtons[i].disabled = false;
            }
        }
    </script>
</body>

Run

Bootstrap Tutorial

Bootstrap Enable Disable Radio Button

Feedback for Abhishek

How can the "disabled" attribute be used to enable or disable a radio button in Bootstrap?

Bootstrap Enable Disable Radio Button - Using Disabled attribute

Output of Bootstrap Enable Disable Radio Button

How can I enable or disable a radio button using jQuery in a Bootstrap-based webpage?

Bootstrap Enable Disable Radio Button - Using Jquery

How can I enable or disable a radio button using JavaScript in a Bootstrap framework?

Bootstrap Enable Disable Radio Button - Using Javascript

Output of Bootstrap Enable Disable Radio Button