试图找到一种解决方案，如果第一个单选按钮（反馈）更改为“开”，但页面必须加载默认为“关”的反馈，则允许我启用表单中的所有字段。所有字段都必须在禁用状态下加载。如果反馈更改为“开”，则其他字段应启用。当然，如果选择了关闭，这些字段将再次被禁用。
我尝试了很多零碎的代码，试图拼凑一个单一的解决方案，但我无法弄清楚。许多解决方案都基于非常旧版本的 jQuery，而我使用的是当前版本。并不是说 jQuery 是必需的，纯 JavaScript 就可以了（如果可能的话）。
感谢任何帮助。这是代码。
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<label>Feedback</label>
<input id="controlon" class="w3-radio" type="radio" name="feedback" value="on">
<label>On</label>
<input id="controloff" class="w3-radio" type="radio" name="feedback" value="off" checked>
<label>Off</label>
<hr />
<label>Name</label>
<input id="name" class="" type="text" name="text">
<label>Species</label>
<select id="species" class="" name="species">
<option value="0" disabled selected>- Select -</option>
<option value="1">Cat</option>
<option value="1">Dog</option>
</select>
<label>Age</label>
<input id="kp" class="" type="radio" name="age" value="on">
<label>Kitten/Puppy</label>
<input id="adult" class="" type="radio" name="age" value="off" checked>
<label>Adult</label>
<label>Comments</label>
<textarea id="comments" class="" rows="4"></textarea>
<button id="send" class="">Send</button>
</body>
</html>
这就是最终对我有用的东西
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="w3-container">
<label>Feedback</label>
<input id="controlon" class="w3-radio" type="radio" name="feedback" value="on">
<label>On</label>
<input id="controloff" class="w3-radio" type="radio" name="feedback" value="off" checked>
<label>Off</label>
</div>
<hr />
<div class="w3-container">
<label>Name</label>
<input id="name" class="" type="text" name="text" disabled>
<label>Species</label>
<select id="species" class="" name="species" disabled>
<option value="0" disabled selected>- Select -</option>
<option value="1">Cat</option>
<option value="1">Dog</option>
</select>
<label>Age</label>
<input id="kp" class="" type="radio" name="age" value="on" disabled checked>
<label>Kitten/Puppy</label>
<input id="adult" class="" type="radio" name="age" value="off" disabled>
<label>Adult</label>
<label>Comments</label>
<textarea id="comments" class="" rows="4" disabled></textarea>
<button id="send" class="" disabled>Send</button>
</div>
<script>
$('input:radio[name="feedback"]').change(function() {
if ($(this).val()=='on') {
$('#name,#species,#kp,#adult,#comments,#send').attr('disabled', false);
}
else if ($(this).val()=='off') {
$('#name,#species,#kp,#adult,#comments,#send').attr('disabled', true);
}
});
</script>
</body>
</html>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句