Question

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

我尝试了很多点的代码，试图将单个解决方案修补在一起，但我无法弄清楚。许多解决方案都基于非常老的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>

Answer 1

您可能需要更确切地说明要启用或禁用的确切位置。这是一般的想法：

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

检测更改/ jquery：

$( ".w3-radio" ).change(function() {
   if ($('#controlon').is(':checked')) {
     // apply the same class to everything you want enabled
     $('.whatever').prop("disabled", false);
   } else {
     $('.whatever').prop("disabled", true);;
   }
});

工作示例：

https://codepen.io/jfitzsimmons/pen/QRboYj?editors=1111

Answer 2

这才是对我有用的

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

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

2 个答案: