示例代码

<form name="mainform" method="post" action="abc.jsp" >
<table id="style1">
    <tr>
        <td>name
            <input type="text" name="name" id="name">
        </td>
    </tr>
    <tr>
        <td>age
            <input type="text" name="age" id="age">
        </td>
    </tr>
    <tr>
        <td>tel no.
            <input type="text" name="telno" id="telno">
        </td>
    </tr>
    <tr>
        <td>email
            <input type="text" name="email" id="email">
        </td>
    </tr>
    <tr>
        <td>marital status
            <select name="ms" id="ms" onChange="fnTest();">
                <option>married</option>
                <option>single</option>
            </select>
        </td>
    </tr>
</table>

function fnTest() {

document.mainform.getElementById("style1").disabled = true;

//CONDITION

document.mainform.getElementById("name").disabled = false;    }

Answer 1

尝试在输入中添加类，如下所示：

<input type="text" class='information' name="name" id="name">

然后试试这段代码：

function toggle(bool){

    if(bool == 'true') {
       document.getElementsByClassName('information').disabled = true;
    } else {
       document.getElementsByClassName('information').disabled = false;
    }
}

如何调用该函数：

toggle('true');

Answer 2

请勿使用document.mainForm.getElementById尝试document.getElementById。
在<fieldset>中包含您的输入并禁用它而不是<table>
您无法在html中禁用一组控件，并且只能在此组中启用一个输入（至少不需要编写额外的代码）。要实现此行为，只需在<fieldset>中包含要禁用的输入组，并将具有单独规则的控件放在此组外禁用。

以下是demo：

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <form name="mainform" method="post" action="abc.jsp">
  <table>
        <tr>
          <td>name
            <input type="text" name="name" id="name">
          </td>
        </tr>
      </table>
    <fieldset id="myform">
      <table id="style1">
        <tr>
          <td>age
            <input type="text" name="age" id="age">
          </td>
        </tr>
        <tr>
          <td>tel no.
            <input type="text" name="telno" id="telno">
          </td>
        </tr>
        <tr>
          <td>email
            <input type="text" name="email" id="email">
          </td>
        </tr>
        <tr>
          <td>marital status
            <select name="ms" id="ms" onChange="fnTest();">
              <option>married</option>
              <option>single</option>
            </select>
          </td>
        </tr>
      </table>
    </fieldset>
  </form>
  <script>
    function fnTest() {

      document.getElementById("myform").disabled = true;

      //Reverse your condition to disable name input as well

      //document.getElementById("name").disabled = true;
    }
  </script>
</body>

</html>

Answer 3

我用你的代码制作了一个fiddle然后调整了一下。这是你的目标吗？

HTML：

<table id="style1">
    <tr>
        <td>name
            <input class='style2' type="text" name="name" id="name"/>
        </td>
    </tr>
    <tr>
        <td>age
            <input class='style2' type="text" name="age" id="age"/>
        </td>
    </tr>
    <tr>
        <td>tel no.
            <input class='style2' type="text" name="telno" id="telno"/>
        </td>
    </tr>
    <tr>
        <td>email
            <input class='style2' type="text" name="email" id="email"/>
        </td>
    </tr>
    <tr>
        <td>marital status
            <select class='style2' name="ms" id="ms">
                <option>Select One</option>
                <option>married</option>
                <option>single</option>
            </select>
        </td>
    </tr>
</table>

JS：

var fnTest = function() {
    alert('change');
    var list = document.getElementsByClassName("style2");
    for (var l=0;l<list.length;l++) {
        list[l].disabled = true;
    }
    if (true) { //Your Condition
        document.getElementById("name").disabled = false;
        document.getElementById("ms").disabled = false; 
    } else {
        document.getElementById("name").disabled = true;
        document.mainform.getElementById("ms").disabled = true; 
    }
};

document.getElementById('ms').addEventListener('change', function() { fnTest(); });

可以禁用表中的所有字段并放置条件以启用需要的某些字段？

示例代码

3 个答案: