jQuery UI Buttonset enable() 方法(1)

📌 相关文章

📜 jQuery UI Buttonset enable() 方法(1)

📅 最后修改于: 2023-12-03 15:32:09.854000 🧑 作者: Mango

jQuery UI Buttonset enable() 方法

介绍

enable() 方法是jQuery UI Buttonset插件中的方法之一，用于启用或禁用按钮集中的所有按钮。它可以接收一个布尔类型的参数，即 true 表示启用按钮， false 表示禁用按钮。该方法会同时对所有按钮进行操作，无需单独处理每个按钮。

语法

$(selector).buttonset("enable", enable );

参数

selector: 必需，用于指定要操作的按钮集的选择器。
enable: 可选，布尔类型，表示要启用或禁用按钮。默认为 true 。

返回值

该方法不会返回任何值。

示例

以下示例演示了如何使用 enable() 方法：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Buttonset enable() 方法示例</title>
  <link rel="stylesheet" href="//cdn.bootcss.com/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
  <div id="btnSet">
    <input type="radio" id="btn1" name="btnSet" checked="checked" /><label for="btn1">Button 1</label>
    <input type="radio" id="btn2" name="btnSet" /><label for="btn2">Button 2</label>
    <input type="radio" id="btn3" name="btnSet" /><label for="btn3">Button 3</label>
  </div>
  <br />
  <button onclick="enableBtnSet()">启用按钮</button>
  <button onclick="disableBtnSet()">禁用按钮</button>
  <script>
    $(document).ready(function() {
      $("#btnSet").buttonset(); // 初始化按钮集
    });

    function enableBtnSet() {
      $("#btnSet").buttonset("enable", true); // 启用按钮集中的所有按钮
    }

    function disableBtnSet() {
      $("#btnSet").buttonset("enable", false); // 禁用按钮集中的所有按钮
    }
  </script>
</body>
</html>

注：需要引用jQuery和jQuery UI相关的文件。以上示例会在页面中创建一个带有三个单选按钮的按钮集，点击"启用按钮"按钮将启用该按钮集中的所有按钮，点击"禁用按钮"按钮将禁用该按钮集中的所有按钮。

使用注意事项

关于 selector 参数，可以是类选择器、ID选择器、元素选择器等；
如果不传参数 enable 或 enable 值为 true 时，按钮将被启用；如果 enable 值为 false 时，按钮将被禁用；
如果需要针对每个单独的按钮进行操作，可以使用 prop() 方法设置其 disabled 属性：
```
$("#someButton").prop("disabled", true); // 禁用某个按钮
$("#someButton").prop("disabled", false); // 启用某个按钮
```
当然，这种做法对于按钮较多的情况下，代码量较大且不太方便，使用 enable() 方法会更加方便。