我的网页上有以下代码：

<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>

在复选框的点击“测试”，我想禁用和启用复选框“test1”和清除和禁用输入框.我希望同样的事情是真的，当页面加载和复选框“测试”已经选中.我能够成功地禁用和启用复选框，并清除文本框点击“测试”复选框，但是如果在检索时已经选中了复选框“测试”则禁用复选框“测试2”，但是用户可以在文本框中输入任何内容。我如何防止这种情况？下面是我的代码，用于禁用和清除ID为“test2”的复选框和ID为“test3”的文本框这很好用。
我试图写这段代码，以禁用文本框时，我检索已选中的值“测试”复选框，但这是让文本框被永远禁用，即使我取消选中“测试检查

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