如何使用 jQuery 在按钮点击时启用"disabled"属性?

jqueryweb developmentfront end technology更新于 2026/2/11 3:52:17

在 jQuery 中将 disabled 属性设置为 true −

<input type="text" disabled=true id="showTxtBoxHide" value="My Name is David..">

示例

以下是代码 −

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
<body>
  <input type="text" disabled=true id="showTxtBoxHide" value="My Name is David..">
  <br>
  <br>
  <input type="button" id="change" value="ClickTheButtonToEnableTextBox">
</body>
<script>
  $("#change").click(function (buttonEvent) {
    buttonEvent.preventDefault();
    $('#showTxtBoxHide').prop("disabled", false);
  });
</script>
 
</html>

要运行上述程序，请将文件名保存为 anyName.html(index.html)。右键单击该文件，然后在 VS Code 编辑器中选择"使用实时服务器打开"选项 −