jQWidgets jqxCheckBoxGroup disabled Property

Last Updated : 30 Jan, 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 jqxCheckBoxGroup widget is used to display a group of checkboxes that allows users to select or deselect the checkbox group.

The disabled property is used to set or return if the displayed jqxCheckBoxGroup is disabled or not. It is of type boolean and it’s default value is “false”.

Syntax:

Setting the disabled property.

$("#jqxCheckBoxGroup").jqxCheckBoxGroup({ disabled: true });

Returning the disabled property.

var disabled = $('#jqxCheckBoxGroup').jqxCheckBoxGroup('disabled');

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/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/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckboxgroup.js”></script>

Example 1: The below example illustrates the jQWidgets jqxCheckBoxGroup disabled property.

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/jqxcheckbox.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxcheckboxgroup.js"></script> 
      
    <style> 
        body { 
            margin-left: 100px; 
        } 
  
        .jqxcheckboxgroup { 
            margin-left: 50px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidgets jqxCheckBoxGroup disabled Property 
        </h3> 
  
        <h4>Select your Company name:</h4> 
  
        <div class='jqxcheckboxgroup'>GfG</div> 
        <div class='jqxcheckboxgroup'>TCS</div> 
        <div class='jqxcheckboxgroup'>Capgemni</div> 
        <div class='jqxcheckboxgroup'>Wipro</div> 
        <br> 
        <input type="button" style="margin: 5px;" 
               id="btn" value="Click here" /> 
        <div id="log"></div> 
  
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $(".jqxcheckboxgroup").jqxCheckBox({ 
                    theme: 'energyblue', 
                    disabled: true, 
                }); 
                $("#btn").jqxButton({ 
                    width: 180, 
                    theme: 'energyblue', 
                }); 
                $('#btn').jqxButton(). 
                    click(function () { 
                        var d = 
                            $('.jqxcheckboxgroup').jqxCheckBox('disabled'); 
                        $('#log').text("Disabled!"); 
                    }) 
            });     
        </script> 
    </center> 
</body> 
  
</html>

Output:

Example 2: The following is another example of the jqxCheckBoxGroup disabled property 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/jqxcheckbox.js"></script> 
    <script type="text/javascript"
        src="jqwidgets/jqxcheckboxgroup.js"></script> 
      
    <style> 
        body { 
            margin-left: 100px; 
        } 
  
        .jqxcheckboxgroup { 
            margin-left: 50px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidgets jqxCheckBoxGroup disabled Property 
        </h3> 
  
        <h4>Select your Company name:</h4> 
  
        <div class='jqxcheckboxgroup'>GfG</div> 
        <div class='jqxcheckboxgroup'>TCS</div> 
        <div class='jqxcheckboxgroup'>Capgemni</div> 
        <div class='jqxcheckboxgroup'>Wipro</div> 
        <br> 
        <input type="button" style="margin: 5px;" 
               id="btn" value="Click here" /> 
        <div id="log"></div> 
  
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $(".jqxcheckboxgroup").jqxCheckBox({ 
                    theme: 'material', 
                    disabled: false, 
                }); 
                $("#btn").jqxButton({ 
                    width: 180, 
                }); 
                $('#btn').jqxButton(). 
                    click(function () { 
                        var d = 
                            $('.jqxcheckboxgroup').jqxCheckBox('disabled'); 
                        if (d === null) { 
                            $('#log').text("Null!"); 
                        } 
                        else { 
                            $('#log').text("False!"); 
                        } 
                    }); 
            }); 
  
        </script> 
    </center> 
</body> 
  
</html>