Javascript 使用单选按钮禁用所有表单元素_Javascript

Javascript 使用单选按钮禁用所有表单元素

javascript

Javascript 使用单选按钮禁用所有表单元素,javascript,Javascript,试图找到一种解决方案，允许我在第一个单选按钮（反馈）更改为“开”时启用表单中的所有字段，但页面必须加载默认为“关”的反馈。所有字段必须在禁用状态下加载。如果反馈更改为“开”，则应启用其他字段。当然，如果选择“关闭”，字段将再次禁用我尝试了很多代码，试图拼凑出一个单一的解决方案，但我想不出来。许多解决方案都基于非常旧的jQuery版本，我使用的是当前版本。并不是说jQuery是一种需求，纯JavaScript就可以了（如果可能的话）谢谢你的帮助。这是密码 <html> <he

试图找到一种解决方案，允许我在第一个单选按钮（反馈）更改为“开”时启用表单中的所有字段，但页面必须加载默认为“关”的反馈。所有字段必须在禁用状态下加载。如果反馈更改为“开”，则应启用其他字段。当然，如果选择“关闭”，字段将再次禁用

我尝试了很多代码，试图拼凑出一个单一的解决方案，但我想不出来。许多解决方案都基于非常旧的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>


反馈
在…上
关

名称
种
-挑选-
猫
狗
年龄
小猫/小狗
成人
评论
发送

您可能需要更具体地说明您希望启用或禁用的确切信息。以下是总体思路：

if (document.getElementById("controlon").checked === true) {
  document.getElementById('whatever').disabled = false;

 // or get multiple elements by whatever you want
}

对于多个字段，您可以执行以下操作：

var inputs = document.getElementsByClassName('whatever');
for(var i = 0; i < inputs.length; i++) {
    inputs[i].disabled = false;
}

工作示例：

以下是最终对我有用的东西

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


反馈
在…上
关

名称
种
-挑选-
猫
狗
年龄
小猫/小狗
成人
评论
发送
$（'input:radio[name=“feedback”]”）。更改（函数（）{
if（$（this.val（）=='on'）{
$（“#名称，#物种，#kp，#成年，#注释，#发送”）.attr（'disabled'，false）；
} 
else if（$（this）.val（）=='off'）{
$（“#名称，#物种，#kp，#成人，#评论，#发送”）.attr（'disabled'，true）；
}
});

你说得对，我修改了这篇文章以便在这方面更加清晰，我会试试你的建议，thanks@Kodara我还没有完全理解你的想法。我更新了我的答案，并建议如何按类名启用多个字段。希望有帮助。我尝试了你的建议，在第2行中将“whatever”更改为“name”，但没有发生任何情况，控制台报告以下错误：未捕获类型错误：无法读取null的属性“checked”。为了清楚起见，当页面加载时，我希望禁用“every”表单字段（当然，反馈收音机除外）@当你的单选按钮改变时，你需要一些听众。然后，你将需要一个条件，如我张贴。尝试添加一些javascript，然后在遇到问题时提问。查看事件侦听器、onChange和获取元素的不同方式。

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