Open In App

jQuery UI Checkboxradio destroy() Method

Last Updated : 02 Dec, 2021
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

Checkboxradio Widget destroy() method is used remove all functionality of checkboxradio button. It returns the element back to its pre-init state. This method does not accept any parameters.

Syntax:

$( ".selector" ).checkboxradio( "destroy" );

Approach: First, add jQuery UI scripts needed for your project.

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">

<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>

<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Example:

HTML
<!DOCTYPE html>
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'
        rel='stylesheet'>

    <script src=
        "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>

    <script src=
        "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>

        <h3>Radio Button Example</h3>
        <label for="radio1">Button 1</label>
        <input type="radio" name="radio" 
            id="radio1" class='radio'>
        <br>

        <label for="radio2">Button 2</label>
        <input type="radio" name="radio" 
            id="radio2" class='radio'>
        <br>

        <label for="radio3">Button 3</label>
        <input type="radio" name="radio" 
            id="radio3" class='radio'>
        <br><br><br>

        <h3>Checkbox Example</h3>
        <label for="checkbox1">Checkbox 1</label>
        <input type="checkbox" name="checkbox1" 
            id="checkbox1" class='checkbox'>
        <br>

        <label for="checkbox2">checkbox 2</label>
        <input type="checkbox" name="checkbox2" 
            id="checkbox2" class='checkbox'>

        <script>
            $(document).ready(function () {

                $(".radio, .checkbox").checkboxradio({"destroy"});
            }); 
        </script>
    </center>
</body>

</html>

Output:


Similar Reads