gpt4 book ai didi

javascript - jquery 使用复选框禁用文本框(带复选框的多个文本框)

转载 作者:太空宇宙 更新时间:2023-11-04 14:28:22 25 4
gpt4 key购买 nike

我试图在用户选中复选框时禁用文本框。

我用单个文本框和复选框完成了。

我现在卡住了,如果用户可以添加多个带复选框的文本框怎么办?

到目前为止,这是我的输出:

enter image description here

我的输出是,每当我勾选复选框时,禁用的 attr 只会将一个文本框切换到另一个文本框。

我希望当一个复选框被选中时,文本框仍然保持禁用状态,直到我取消选中其相应的复选框。

这是我目前编写的代码。

HTML

<div id="operator_properties">
<label for="operator_title">Operator's title: </label> <input type="text" id="operator_title">
<br /><br />
<button id="append" class="btn btn-primary">Add Connectors</button>
<br /><br />
<div class="col-md-10">
<div id="parent"></div>
</div>
<div class="clearfix"></div>
<hr />
<div class="col-md-12">
<button class="btn btn-success" id="operator_btn">
Confirm
</button>
</div>
<div class="clearfix"></div>
</div>

Jquery

$(function () {
var count = 1;
$('#append').click(function () {
$('#parent').append('<div class="operator"> <div class="row"> <div class="col-md-2"><input type="text" id="input' + count + '" class="input-text" placeholder="Input' + count + ' title"><br /> <input type="checkbox" id="disableinput' + count + '" class="disable-input" /><label for="disableinput' + count + '" style="vertical-align: middle;"> &nbsp; Disable</label> </div> &nbsp <div class="col-md-3"><input type="text" id="output' + count + '" class="output-text" placeholder="Output' + count + ' title"> <a href="#" id="' + count + '" class="remove">Remove</a> <br /> <input type="checkbox" id="disableoutput' + count + '" class="disable-output" /><label for="disableoutput' + count + '"style="vertical-align: middle;"> &nbsp; Disable</label></div></div></div>');
count++;
});
});

$(document).on('click', '.remove', function () {
$(this).closest("div.operator").remove();
});

$(document).on('change', '.disable-input', function () {
$("#parent").find("input.input-text").attr("disabled", false);
if ($(this).is(":checked"))
$(this).parent().find("input.input-text").attr("disabled", true);
//console.log('working');
});

最佳答案

删除以下行:

$("#parent").find("input.input-text").attr("disabled", false);

...因为这会启用 #parent 元素中的所有输入。

您似乎已经知道如何使用 $(this).parent(...).find(...) 来获取与单击项目相关的文本框,因此只需修改它代码:

$(document).on('change', '.disable-input', function () {
$(this).parent().find("input.input-text").prop("disabled", this.checked);
});

请注意,您可以简单地使用 this.checked 而不是 $(this).is(":checked")) - 更高效且更易于阅读。此外,使用 .prop() 而不是 .attr() 进行此类动态状态更改。

关于javascript - jquery 使用复选框禁用文本框(带复选框的多个文本框),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43604738/

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