JQWidgets jqxRadioButtonGroup enable() Method - Coding

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 enable() method is used to enable the displayed jqxRadioButtonGroup. It has no parameters, and it does not return anything.

Syntax:

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

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 enable() method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
        "jqwidgets/styles/jqx.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> 
    <script type="text/javascript"
        src="jqwidgets/jqxbuttons.js"></script> 
      
    <style> 
        body { 
            margin-left: 100px; 
        } 
  
        .jqxradiobuttongroup { 
            margin-left: 50px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidgets jqxRadioButtonGroup enable() Method 
        </h3> 
  
        <h4>Choose the correct option:</h4> 
  
        <div class='jqxradiobuttongroup'> 
            GeeksforGeeks is a service oriented company. 
        </div> 
        <div class='jqxradiobuttongroup'> 
            Capgemni is not a service oriented company. 
        </div> 
        <div class='jqxradiobuttongroup'> 
            Microsoft is not a service oriented company. 
        </div> 
        <br> 
        <input type="button" style="margin: 5px;" 
               id="btn" value="Click here" /> 
        <div id="log"></div> 
  
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $(".jqxradiobuttongroup").jqxRadioButton({ 
                    theme: 'energyblue', 
                }); 
                $("#btn").jqxButton({ 
                    width: 180, 
                    theme: 'energyblue', 
                }); 
                $('.jqxradiobuttongroup').jqxRadioButton('disable'); 
                $('#btn').jqxButton(). 
                    click(function () { 
                        $('.jqxradiobuttongroup').jqxRadioButton('enable'); 
                        $('#log').text("Widget enabled!"); 
                    }); 
            });     
        </script> 
    </center> 
</body> 
  
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
        "jqwidgets/styles/jqx.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> 
    <script type="text/javascript"
        src="jqwidgets/jqxbuttons.js"></script> 
      
    <style> 
        body { 
            margin-left: 100px; 
        } 
  
        .jqxradiobuttongroup { 
            margin-left: 50px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidgets jqxRadioButtonGroup enable() Method 
        </h3> 
  
        <h4>Choose the correct option:</h4> 
  
        <div class='jqxradiobuttongroup'> 
            GeeksforGeeks is a service oriented company. 
        </div> 
        <div class='jqxradiobuttongroup'> 
            Capgemni is not a service oriented company. 
        </div> 
        <div class='jqxradiobuttongroup'> 
            Microsoft is not a service oriented company. 
        </div> 
        <br> 
        <input type="button" style="margin: 5px;" 
               id="btn" value="Click here" /> 
        <div id="log"></div> 
  
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $(".jqxradiobuttongroup").jqxRadioButton({ 
                    theme: 'energyblue', 
                }); 
                $("#btn").jqxButton({ 
                    width: 180, 
                    theme: 'energyblue', 
                }); 
                $('.jqxradiobuttongroup').jqxRadioButton('disable'); 
                $('#btn').jqxButton(). 
                    click(function () { 
                        var e = $('.jqxradiobuttongroup').jqxRadioButton('enable'); 
                        if (e === null) { 
                            $('#log').text("Null!"); 
                        } 
                        else { 
                            $('#log').text("Not null!"); 
                        } 
                    }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>

Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxradiobuttongroup/jqxradiobuttongroup-api.htm?search=

Reffered: https://www.geeksforgeeks.org

JQuery

Related
jQWidgets jqxRadioButtonGroup render() Method
jQWidgets jqxRadioButtonGroup destroy() Method
jQWidgets jqxRadioButtonGroup disable() Method
jQWidgets jqxChart showToolTip() Method
jQWidgets jqxChart saveAsPDF() Method

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	10