gpt4 book ai didi

javascript - 单击复选框时禁用/启用表单文本框,并将文本框的名称作为参数传递给 JavaScript 函数

转载 作者:行者123 更新时间:2023-12-03 00:42:07 25 4
gpt4 key购买 nike

这是一个示例代码,我在单击复选框时禁用或启用文本框。

function enable_text(status) {
status = !status;
document.f1.other_text.disabled = status;
}
<body onload=enable_text(false);>

<form name=f1 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">Others
<input type=text name=other_text>
</form>

</body>

我面临的问题是,每次在表单中添加新的复选框和文本框时,我都需要重复 JavaScript 代码,因为复选框的名称已被硬编码。我该如何使其动态,以便一旦我添加了带有复选框的新文本框,它应该动态地获取它并在单击复选框时启用它

最佳答案

这就是使用 javascript 代码的方法

var classname = document.getElementsByClassName("chkbox");

var myFunction = function() {
if(this.checked == true){
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = false;

}else{
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = true;
}

};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}
  <form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>

这是使用 JQuery 代码的方式

$('.chkbox').on('click',function(){
if($(this).is(':checked')){
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",false)
}
else{
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",true)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>

<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>

关于javascript - 单击复选框时禁用/启用表单文本框,并将文本框的名称作为参数传递给 JavaScript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53407508/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com