使用javascript禁用带有复选框的多个文本框 - how to Enable Disable multiple textboxes with checkboxes using javascript

how to Enable Disable multiple textboxes with checkboxes using javascript

本文关键字：文本复选框 javascript 使用 | 更新日期: 2023-09-27

我想让我的文本框禁用页面的onload，并在相应的复选框被选中时启用它..文本框将只启用如果相应的复选框..我怎么能做到这一点..下面是我的html代码..我需要一个javascript来运行我想要的功能..

<html>
<head>
</head>
<body>
<form name="f1" action="showReceipt.php" method="POST">
<table >
<tr><td>Transaction ID <input type="text" name="txtID"> <?php echo date("m / d / Y");?></td></tr>
<tr><td><h2>Your Order:</h2></td></tr>
<tr><td><input  type="checkbox"  name="cbItem[]" value="Chicken Joy"> Chicken Joy (PhP 90.00)</td> <td>Quantity <input type="text" name="txtQty[Chicken Joy]"></td></tr>
<tr><td><input  type="checkbox" name="cbItem[]" value="Jolly Spaghetti"> Jolly Spaghetti (PhP 50.00)</td> <td>Quantity <input type="text"  name="txtQty[Jolly Spaghetti]"></td></tr>
<tr><td><input type="checkbox" name="cbItem[]" value="Yum Burger"> Yum Burger (PhP 29.00)</td> <td>Quantity <input type="text" name="txtQty[Yum Burger]"></td></tr>
<tr><td><input type="checkbox" name="cbItem[]" value="Jolly Twirls"> Jolly Twirls (PhP 25.00)</td> <td>Quantity <input type="text" name="txtQty[Jolly Twirls]"></td></tr>
<tr><td><input type="checkbox" name="cbItem[]" value="Big Champ"> Big Champ (PhP 120.00)</td> <td>Quantity <input type="text" name="txtQty[Big Champ]"></td></tr>
<tr><td>Amount Given: <input type="text" name="txtAmount"></td> <td><input type="submit" name="btnGen" value="Generate Receipt">  <input type="reset" value="Clear">
</table>
</form>
</body>
</html>

document.addEventListener("DOMContentLoaded", function(event) {
  var textbox = document.getElementById("mybox");
  textbox.setAttribute("disabled", "disabled");
  document.getElementById("checkMe").addEventListener("click", function(event) {
    var textbox = document.getElementById("mybox");
    textbox.removeAttribute("disabled");
  });
});

<input type="checkbox" id="checkMe" />
<input type="text" id="mybox" />

你可以尝试用Events执行每个进程。当页面加载完所有元素后，将框属性设置为disabled。然后监听单击复选框的另一个事件。当该事件触发时，移除复选框的disabled状态。

如果你想从一开始就禁用你的输入，你的输入应该像这样

<input type = "Text" name = "firstname" id="1" disabled="disabled" />

或者如果你想用javascript禁用它，你必须在加载时执行它。像这样:

window.onload = function() {
   document.getElementById('1').disabled = true;
};