jQuery 切换 disabled 属性在 jQuery 中

在本文中，我们将介绍如何使用 jQuery 来切换元素的 disabled 属性。

什么是 disabled 属性？

disabled 属性是 HTML 中的一个布尔属性，用于禁用用户与元素进行交互。当一个元素被设置为 disabled 时，用户无法点击、选择或修改该元素。通常，应用 disabled 属性可以提供给用户只读的元素或阻止用户输入的表单字段。

在 jQuery 中切换 disabled 属性

引入 jQuery 库之后，我们可以很方便地使用 toggle 方法来切换元素的 disabled 属性。toggle 方法的作用是在元素的两个或多个状态之间切换。下面是使用 jQuery 来切换 disabled 属性的示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<h3>切换按钮状态示例</h3>

<button id="myButton">点击切换按钮状态</button>

<script>
 $(document).ready(function(){$ ("#myButton").click(function(){
    $("#myButton").prop("disabled", function(i, val){
      return !val;
    });
  });
});
</script>

</body>
</html>

在上面的示例中，我们创建了一个按钮元素，并为其添加了一个 id 为 “myButton”。通过点击按钮，可以切换按钮的 disabled 属性。初始状态下，按钮是可用的，点击按钮后，按钮将被禁用，再次点击按钮将重新启用。

怎样判断一个元素是否处于 disabled 状态？

我们可以使用 jQuery 的 prop 方法来判断一个元素是否处于 disabled 状态。prop 方法可以获取或设置元素的属性值。当我们获取 disabled 属性时，prop 方法会返回 true 或 false，表示元素的状态。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<h3>判断元素是否处于 disabled 状态示例</h3>

<button id="myButton">点击判断按钮状态</button>

<p id="result"></p>

<script>
 $(document).ready(function(){$ ("#myButton").click(function(){
    var isDisabled =  $("#myButton").prop("disabled"); if(isDisabled){$ ("#result").text("按钮处于禁用状态");
    }else{
      $("#result").text("按钮处于可用状态");
    }
  });
});
</script>

</body>
</html>

在上面的示例中，我们创建了一个按钮元素，并为其添加了一个 id 为 “myButton”。点击按钮后，判断按钮的 disabled 属性，并将结果通过改变一个段落元素的文本来展示。