英文:
Disabling text box on check/uncheck of checkbox
问题
以下是代码的翻译部分：
<!-- 在我的网页上有以下代码： -->
<!-- 开始代码段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-html -->
<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" /> 这是另一个测试 <br />
<input type="text" id="test2" /> 这是不同的测试<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" 复选框时禁用和启用了复选框，并清除了文本框中的内容，但如果复选框 "test" 在检索时已经被选中，那么复选框 "test2" 被禁用，但用户仍然可以在文本框中输入任何内容。如何防止这种情况发生？以下是我的代码，用于禁用 Id 为 "test2" 的复选框和 Id 为 "test3" 的文本框，并且这段代码能正常工作。
我尝试编写以下代码，以在检索已选中 "test" 复选框的值时禁用文本框，但这会导致文本框永远被禁用，即使取消选中 "test" 复选框也是如此：
<script>
if ($('#test').is(':checked')) {
$('#test1 input[type="text"]')
.attr('disabled', 'disabled');
}
</script>
英文:
I have the following code on my web page:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
on the click of checkbox "test", I want to disable and enable the checkbox "test1" and clear out and disable the input box . I want same thing to be true when the page loads and checkbox "test" is already checked. I was able to successfully disable and enable the check box and clear the text box on click of "test" check box, but if the checkbox "test" is already checked on retrieval then the checkbox "test2" is disabled, but user can type anything in the text box. How can I prevent that? below is my code for disabling and clearing out the checkbox with Id "test2" and textbox with Id "test3" which works fine.
I tried to write this code in order to disable the text box when I retrieve the already checked value of "test" check box, but this is letting the text box to be disabled forever even if I uncheck "test check
<script>
if ($('#test').is(':checked')) {
$('#test1 input[type="text"]')
.attr('disabled', 'disabled');
}
</script>
答案1
得分: 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('');
}
}
// 处理手动更改
$('#test').on('change', handleCheckboxState);
// 处理初始状态
$(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 is another test <br />
<input type="text" id="test2" /> This is a different test <br />
</div>
英文:
Create a method that handles what happens when the element is checked or unchecked and call it at the change event of the checkbox, but also on the document load event.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论