博客

jQWidgets jqxRating disable() 方法

  • Post category:jquery

jQWidgets jqxRating disable() 方法

概述

disable() 方法是 jQWidgets jqxRating 插件之中的一个方法，可以用于禁用 jqxRating 组件。

方法语法

$(selector).jqxRating('disable');

参数说明

该方法没有参数。

返回值

该方法没有返回值。

示例说明

以下是两个例子，展示了如何使用 disable() 方法。

示例一

<!DOCTYPE html>
<html>
<head>
    <title>示例一：使用 disable() 方法禁用 jqxRating 组件</title>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxrating.js"></script>
    <style type="text/css">
        #jqxRating {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="jqxRating"></div>
    <button id="disableButton">禁用</button>
    <button id="enableButton">启用</button>
    <script type="text/javascript">
        $(function() {
            // 初始化 jqxRating 组件
            $('#jqxRating').jqxRating({ 
                width: 350, 
                height: 35, 
                theme: 'classic',
                itemWidth: 35,
                itemHeight: 35 
            });

            // 禁用按钮的点击事件
            $('#disableButton').click(function() {
                // 禁用 jqxRating 组件
                $('#jqxRating').jqxRating('disable');
                console.log('jqxRating 已禁用');
            });

            // 启用按钮的点击事件
            $('#enableButton').click(function() {
                // 启用 jqxRating 组件
                $('#jqxRating').jqxRating('enable');
                console.log('jqxRating 已启用');
            });
        });
    </script>
</body>
</html>

在该示例中，我们使用 disable() 方法禁用了一个 jqxRating 组件，并且添加了两个按钮分别用于禁用和启用 jqxRating 组件。当我们点击“禁用”按钮时，会调用 disable() 方法禁用 jqxRating 组件，并且在控制台中输出相应的信息；同理，当我们点击“启用”按钮时，会调用 enable() 方法启用 jqxRating 组件，并且在控制台中输出相应的信息。

示例二

<!DOCTYPE html>
<html>
<head>
    <title>示例二：使用 disable() 方法禁用多个 jqxRating 组件</title>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxrating.js"></script>
    <style type="text/css">
        .jqx-rating {
            margin: 10px 0;
            width: 350px;
        }
    </style>
</head>
<body>
    <div>
        <div class="jqx-rating"></div>
        <div class="jqx-rating"></div>
    </div>
    <button id="disableButton">禁用</button>
    <button id="enableButton">启用</button>
    <script type="text/javascript">
        $(function() {
            // 初始化两个 jqxRating 组件
            $('.jqx-rating').jqxRating({ 
                width: 350, 
                height: 35, 
                theme: 'classic',
                itemWidth: 35,
                itemHeight: 35 
            });

            // 禁用按钮的点击事件
            $('#disableButton').click(function() {
                // 禁用所有 jqxRating 组件
                $('.jqx-rating').jqxRating('disable');
                console.log('所有 jqxRating 组件已禁用');
            });

            // 启用按钮的点击事件
            $('#enableButton').click(function() {
                // 启用所有 jqxRating 组件
                $('.jqx-rating').jqxRating('enable');
                console.log('所有 jqxRating 组件已启用');
            });
        });
    </script>
</body>
</html>

在该示例中，我们使用 disable() 方法禁用了两个 jqxRating 组件，并且添加了两个按钮分别用于禁用和启用所有 jqxRating 组件。当我们点击“禁用”按钮时，会调用 disable() 方法禁用所有 jqxRating 组件，并且在控制台中输出相应的信息；同理，当我们点击“启用”按钮时，会调用 enable() 方法启用所有 jqxRating 组件，并且在控制台中输出相应的信息。

Tags: