复选框的选中/取消选中的禁用文本框

Question

我的网页上有以下代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="checkbox" id="test" /> This is test
<br />
<div id="test1">
<input type="checkbox" id="test1" />This ia another test <br />
<input type="text" id="test2" /> This is a different test<br />
</div>
<script>
$('#test').on('change', function() {
const isChecked = $(this).is(':checked');
$('#test1').toggleClass('disableSection', isChecked);
$('#test1 input[type="checkbox"]')
.attr('disabled', isChecked)
.prop('checked', false);
$('#test1 input[type="text"]').val('');
});
</script>

在点击"test"复选框时，我想禁用或启用"test1"复选框。清除并禁用输入框。我希望在页面加载和复选框"测试"已经检查过了。我能够成功地禁用和启用复选框，并在点击"test"时清除文本框。复选框，但如果复选框"test"已在检索时选中，则复选框&;test2&;已禁用，但用户可以在文本框中键入任何内容。我怎样才能避免呢?下面是我禁用和清除Id为test2的复选框的代码和Id为"test3">

我试图编写这段代码，以便在检索已选中的"test"值时禁用文本框。复选框，但这会让文本框永远被禁用，即使我取消选中"test check

<script>
if ($('#test').is(':checked')) {
$('#test1 input[type="text"]')
.attr('disabled', 'disabled');
}
</script>

Answer 1

创建一个方法，用于处理选中或未选中元素时发生的情况，并在复选框的change事件和文档加载事件中调用该方法。

function handleCheckboxState() {
const isChecked = $('#test').is(':checked');
$('#test1 input').prop('disabled', isChecked);
$('#test1').toggleClass('disableSection', isChecked);
if (isChecked) {
$('#test1 input:checkbox').prop('checked', false);
$('#test1 input[type="text"]').val('');
}
}

// handle manual change
$('#test').on('change', handleCheckboxState);
// handle initial state
$(document).ready(handleCheckboxState);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="test" /> This is test
<br />
<div id="test1">
<input type="checkbox" id="test1" />This ia another test <br />
<input type="text" id="test2" /> This is a different test<br />
</div>