Question

我试图制作一个基于输入复选框启用或禁用多个输入的JavaScript代码。我为输入复选框创建了一个主要功能，该功能通过HTML中的onclick事件调用。其他函数启用或禁用HTML中的DOM元素。

＆＃13;

var inputs = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = function() {
            if (this.value == 'state1') {
                en();
            } else {
                dis();
            }
        }   
    }     

    function en() {
    var element1 = document.querySelectorAll('.d input[type=text], .d textarea');
    for (var i = 0; i < element1.length; i++) {
        element1[i].disabled = false;
    } 
    }

    function dis() {
    var element2 = document.querySelectorAll('.d input[type=text], .d textarea');
    for (var i = 0; i < element2.length; i++) {
        element2[i].disabled = true;
    }
    }

＆＃13;

 <div class="c">
        <input type="checkbox" name="state1" id="state1" value="state1"><br>
        <input type="checkbox" name="state2" id="state2" value="state2"><br>
        </div>
            
            <div class="d">
            First name: <input type="text" name="fname" disabled><br>
            Middle name: <textarea name="mname" disabled></textarea>
            </div>
            
            Last name: <input type="text" name="lname" id="lnamex" disabled><br>

＆＃13;

Answer 1

假设您对jQuery解决方案持开放态度，我觉得这很适合您的问题，这就是我接近它的方法....

$('input[type="checkbox"]').click(function() { //this selector should be more specific to what checkbox controls the inputs
    if ($(this).is(':checked'))
        $('input[type="text"]').prop('disabled', true);
    else
        $('input[type="text"]').prop('disabled', false);
});

Html当然保持不变......

<div class="c">
  <input type="checkbox" name="state1" id="state1" value="state1" onclick="select()">
  <br>
  <input type="checkbox" name="state2" id="state2" value="state2" onclick="select()">
  <br>
</div>
<div class="d">
  First name:
  <input type="text" name="fname" disabled>
  <br>Middle name:
  <textarea name="mname" disabled></textarea>
</div>
Last name:
<input type="text" name="lname" id="lnamex" disabled>
<br>

我可能错了，但我认为这是你想要完成的事情

Answer 2

function a(enabledisableField) {
        var firstname = document.getElementById("firstName");
        var middlename = document.getElementById("middleName");
        var lastname = document.getElementById("lastName");
        var enablecheck=document.getElementById('enableField');
        var disablecheck=document.getElementById('disableField');

if(enablecheck.checked===true && disablecheck.checked===true){
  alert("check any one");
  
}
  
  if(enablecheck.checked===false && disablecheck.checked===false){
    firstname.disabled =true;
          middlename.disabled =true;
          lastname.disabled =true;
          return;
  
}
       
     else if (enablecheck.checked===true) {
          firstname.disabled =false;
          middlename.disabled =false;
          lastname.disabled =false;
            firstname.focus();
            return;
                     }
    else if(disablecheck.checked===true){
          firstname.disabled =true;
          middlename.disabled =true;
          lastname.disabled =true;
          return;
                     } 
                       
                     
    }

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">

  </head>

  <body>
 <label for="TEst">
    <input type="checkbox" id="enableField" onclick="a(this)" />
Enable</label>
<label for="Test">
    <input type="checkbox" id="disableField" onclick="a(this)" />
Disable</label>    <table>
<tr><td>FirstName</td><td>
<input type="text" id="firstName" disabled="disabled" /></td></tr>
<tr><td>Middle Name</td><td>
<input type="text" id="middleName" disabled="disabled" /></td></tr>
<tr><td>LastName</td><td>
<input type="text" id="lastName" disabled="disabled" /></td></tr>
  </table>
  </body>

</html>

启用/禁用多个输入不起作用

2 个答案: