Question

如果我从下拉列表禁用company，collegename和course中选择year，我会看到如下所示的表单。如果我选择college停用company name和date of join。请帮忙解决这个问题。当我们从下拉列表中选择值时，我需要一些关于如何禁用文本字段的帮助

<form name="form" method="post" action="" onSubmit="submit;">
<center><table border="1" cellspacing="0" style="width:650px">

<tr>
<td><b>Name</td>
<td><input type="text" name="name"></td></tr>

<tr>
<td><b>Father Name</td>
<td><input type="text" name="fname"></td></tr>


<tr><td><b>Gender</td>
<td><select name="gender">
<option value="na">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</td></tr>

<tr>
<td><b>Email</td>
<td><input type="text" name="email"></td></tr>

 <tr>
<td><b>Date Of Birth</td>
<td><input type="text" name="date" id="datepicker" required></td></tr>

<tr>
<td><b>Mobile Number</td>
<td><input type="text" name="mn"></td></tr>

<tr>
<td><b>Parent Number</td>
<td><input type="text" name="pn"></td></tr>

<tr> 
<td><b>Address</td> <td><textarea name="address" rows="3" cols="50"></textarea></td>
</tr>

<tr>
<td><b>Coll/Comp ID Num</td>
<td><input type="text" name="idnum"></td></tr>

<tr><td><b>Company/College</td>
<td><select name="ccname">
<option value="na">Select</option>
<option value="company">Company</option>
<option value="college">College</option>
</td></tr>

<tr>
<td><b>College Name</td>
<td><input type="text" name="colname"></td></tr>

<tr>
<td><b>Course</td>
<td><input type="text" name="course"></td></tr>

<tr>
<td><b>Year</td>
<td><input type="text" name="year"></td></tr>

<tr>
<td><b>Company Name</td>
<td><input type="text" name="comname"></td></tr>

<tr>
<td><b>Date Of Join</td>
<td><input type="text" name="doj" id="datepicker" required></td></tr>


<tr>
<td colspan="2" align="center"><input type="submit" name="submit" value="submit"/></td>
</tr></center>
</table>
  </form>

Answer 1

Use some thing like this if you have problem tell me


 <script> 
      function getccname(val)
{
     if(val == 'company')
     {
     document.getElementById("colname").disabled = true;
     document.getElementById("course").disabled = true;
         document.getElementById("year").disabled = true;
     } 
     else if(val == 'college')
     {
        document.getElementById("comname").disabled = true;
                 document.getElementsByName("doj")[0].disabled  = true;
        document.getElementById("colname").disabled = false;
               document.getElementById("course").disabled = false;
         document.getElementById("year").disabled = false;

     }
     else 
     {
        document.getElementById("comname").disabled = false;
                  document.getElementsByName("doj")[0].disabled = false;
        document.getElementById("colname").disabled = false;
               document.getElementById("course").disabled = false;
         document.getElementById("year").disabled = false;

     }

}

</script>
<form name="form" method="post" action="" onSubmit="submit;">
<center><table border="1" cellspacing="0" style="width:650px">

<tr>
<td><b>Name</td>
<td><input type="text" name="name"></td></tr>

<tr>
<td><b>Father Name</td>
<td><input type="text" name="fname"></td></tr>


<tr><td><b>Gender</td>
<td><select name="gender">
<option value="na">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</td></tr>

<tr>
<td><b>Email</td>
<td><input type="text" name="email"></td></tr>

 <tr>
<td><b>Date Of Birth</td>
<td><input type="text" name="date" id="datepicker" required></td></tr>

<tr>
<td><b>Mobile Number</td>
<td><input type="text" name="mn"></td></tr>

<tr>
<td><b>Parent Number</td>
<td><input type="text" name="pn"></td></tr>

<tr> 
<td><b>Address</td> <td><textarea name="address" rows="3" cols="50"></textarea></td>
</tr>

<tr>
<td><b>Coll/Comp ID Num</td>
<td><input type="text" name="idnum"></td></tr>

<tr><td><b>Company/College</td>
<td><select name="ccname" onchange="getccname(this.value);">
<option value="na">Select</option>
<option value="company">Company</option>
<option value="college">College</option>
</td></tr>

<tr>
<td><b>College Name</td>
<td><input type="text" name="colname" id="colname"></td></tr>

<tr>
<td><b>Course</td>
<td><input type="text" name="course" id="course"></td></tr>

<tr>
<td><b>Year</td>
<td><input type="text" name="year" id="year"></td></tr>

<tr>
<td><b>Company Name</td>
<td><input type="text" name="comname" id="comname"></td></tr>

<tr>
<td><b>Date Of Join</td>
<td><input type="text" name="doj" id="datepicker"></td></tr>


<tr>
<td colspan="2" align="center"><input type="submit" name="submit" value="submit"/></td>
</tr></center>
</table>
  </form>

Answer 2

使用下拉列表调用javascript函数，使用onclick="sample1();"之类的内容，然后使用

禁用文本字段

function sample1(){
    document.getElementById("textfield").disabled=true;
}

在选择禁用文本字段上

2 个答案: