How To Disable Radio Button Using JavaScript

Nov 13, 2021 . Admin



Hello Friends,

Now let's see example of how to disable radio button example.We will check how to disable radio button. This is a short guide on disable radio button in javascript. Here you will learn how to get javascript timer. Let's get started with how to disable radio button in javascript.

Here i will give you many example how to disable radio button using javascript.

Example : 1
<html>
    <head>
        <title>How To Disable Radio Button Using JavaScript - MyWebtuts.com</title>
    </head>
    <body>
        <h3>How To Disable Radio Button Using JavaScript - MyWebtuts.com</h3>
        <form>
            <h3>Are you a developer?</h3>
            <p> Disable radio Button using dropdown </p>
            <select id = "a1" onchange = "radioAns()" >
                <option value="choose">choose</option>
                <option value="yes"> Yes </option>
                <option value="no"> No </option>
            </select>
        </form>

        <p><b>If Yes, Choose Language Your Preferred Programming Language</b></p>

        <label><input type="radio" name="programming" id="laravel" value= "laravel"> Laravel</label>
        <label><input type="radio" name="programming" id="js" value= "js"> JavaScript</label>
        <label><input type="radio" name="programming" id="php" value= "php">Php</label>

        <script>
            function radioAns() {
                var myLang = document.getElementById("a1");
                var result = myLang.options[myLang.selectedIndex].text;
                
                if(result == 'No'){
                    document.getElementById("laravel").disabled = true;
                    document.getElementById("js").disabled = true;
                    document.getElementById("php").disabled = true;
                }else {
                    document.getElementById("laravel").disabled = false;
                    document.getElementById("js").disabled = false;
                    document.getElementById("php").disabled = false;
                }
            }
        </script>
    </body>
</html>
Output :
No
If Yes, Choose Language Your Preferred Programming Language
Laravel, JavaScript, Php (Disabled)
Example : 2
<html>
    <head>
        <title>How To Disable Radio Button Using JavaScript - MyWebtuts.com</title>
    </head>
    <body>
        <h3>How To Disable Radio Button Using JavaScript - MyWebtuts.com</h3>
        <form>
            <h3>Are you a developer?</h3>
            <p> Disable Radio Button Using Checkbox </p>
            Yes : 
            <input type="checkbox" id="a1" onchange="rdbtn()" checked>
        </form>

        <p><b> If Yes, Choose Language Your Preferred Programming Language</b></p>

        <label><input type="radio" name="programming" id="laravel" value= "laravel">Laravel</label>
        <label><input type="radio" name="programming" id="js" value= "js"> JavaScript</label>
        <label> <input type="radio" name="programming" id="php" value= "php">Php</label>

        <script>
            function rdbtn() {
                document.getElementById("laravel").disabled = true;
                document.getElementById("js").disabled = true;
                document.getElementById("php").disabled = true;

                var a2 = document.getElementById("a1").checked;
                if (a2 == true) {
                    document.getElementById("laravel").disabled = false;
                    document.getElementById("js").disabled = false;
                    document.getElementById("php").disabled = false;
                }
            }
        </script>
    </body>
</html>
Output :
Yes
If Yes, Choose Language Your Preferred Programming Language
Laravel, JavaScript, Php (Enable)

It will help you...

#Javascript