jQWidgets jqxRadioButtonGroup disable() Method

Last Updated : 03 Feb, 2023

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxRadioButtonGroup widget is used to display a group of radio buttons that possesses API in order to modify them.

The disable() method is used to disable the displayed jqxRadioButtonGroup. It has no parameters, and it does not return anything.

Syntax:

$("#jqxRadioButtonGroup").jqxRadioButtonGroup('disable');

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jcustomize qx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.energyblue.css”>
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxradiobuttongroup.js”></script>

Example 1: The below example illustrates the jQWidgets jqxRadioButtonGroup disable() method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
    "jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <script type="text/javascript"
        src="scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqx-all.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxradiobutton.js"></script> 
  <script type="text/javascript"
        src="jqwidgets/jqxradiobuttongroup.js"></script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        jQWidgets jqxRadioButtonGroup disable() Method 
    </h3> 
  
    <div id='jqxRadioButtonGroup1'> 
        TCS 
    </div> 
    <div id='jqxRadioButtonGroup2'> 
        Capgemni 
    </div> 
    <div id='jqxRadioButtonGroup3'> 
        Wipro 
    </div> 
  
    <input type="button" id="btn" value="Click Here" 
           style="padding: 5px 14px; margin-top: 15px;"> 
    <br> 
    <div id="log"></div> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#jqxRadioButtonGroup1").jqxRadioButton({ 
                theme: 'energyblue', 
            }); 
            $("#jqxRadioButtonGroup2").jqxRadioButton({ 
                theme: 'energyblue' 
            }); 
            $("#jqxRadioButtonGroup3").jqxRadioButton({ 
                theme: 'energyblue' 
            }); 
            $('#btn').on('click', function () { 
                $('#jqxRadioButtonGroup1').jqxRadioButton('disable'); 
                $('#log').text("Widget disabled!"); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The following is another example of the jqxRadioButtonGroup disable() method in jQWidgets.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
    "jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <script type="text/javascript"
        src="scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqx-all.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxradiobutton.js"></script> 
  <script type="text/javascript"
        src="jqwidgets/jqxradiobuttongroup.js"></script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        jQWidgets jqxRadioButtonGroup disable() Method 
    </h3> 
  
    <div id='jqxRadioButtonGroup1'> 
        TCS 
    </div> 
    <div id='jqxRadioButtonGroup2'> 
        Capgemni 
    </div> 
    <div id='jqxRadioButtonGroup3'> 
        Wipro 
    </div> 
  
    <input type="button" id="btn" value="Click Here" 
           style="padding: 5px 14px; margin-top: 15px;"> 
    <br> 
    <div id="log"></div> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#jqxRadioButtonGroup1").jqxRadioButton({ 
                theme: 'energyblue', 
            }); 
            $("#jqxRadioButtonGroup2").jqxRadioButton({ 
                theme: 'energyblue' 
            }); 
            $("#jqxRadioButtonGroup3").jqxRadioButton({ 
                theme: 'energyblue' 
            }); 
            $('#btn').on('click', function () { 
                var d = 
                    $('#jqxRadioButtonGroup2').jqxRadioButton('disable'); 
                if (d === null) { 
                    $('#log').text("Null!"); 
                } 
                else { 
                    $('#log').text("Not null!"); 
                } 
            }); 
        }); 
    </script> 
</body> 
  
</html>