Question

仅适用于JSP和servlet的Html。我有两个复选框，有两个选项＆＃34;是＆＃34;和＆＃34;不＆＃34;。如果，是的＆＃39;是启用它下面的所有文本输入。如果没有＆＃39;禁用。这是我的JSP：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="RegiPageDesign.css">
    <title>Registration Page</title>
</head>
<body>
    <div><h1>Please Provide the Following Details:</h1></div>
    <form action="Servlet1" method="POST"> 
        <table border="0">
            <tbody>
                <tr>
                    <td style="color: black">Vehicle Owners Name:</td>
                    <td><input type="text" name="vowner" value="" size="20" placeholder="e.g John Van Wyk"/></td>
                </tr>
                <tr>
                    <td style="color: black">Vehicle Drivers Name:</td>
                    <td><input type="text" name="vdriver" value="" size="20" placeholder="e.g Matheus Malima" /></td>
                </tr>
                <tr>
                    <td style="color: black">Vehicle Registration Number:</td>
                    <td><input type="text" name="vreginumber" value="" size="20" placeholder="e.g N 168-1258 W" /></td>
                </tr>
                <tr>
                    <td style="color: black">NABTA ID:</td>
                    <td><input type="text" name="nabtaId" value="" size="20" placeholder="e.g NABTA685" /></td>
                </tr>
                <tr>
                    <td style="color: black">Vehicle Type:</td>
                    <td><select name="vtype">
                            <option>Bus</option>
                            <option>Minibus</option>
                            <option>Taxi</option>
                        </select></td>
                </tr>
                <tr>
                    <td style="color: black">Vehicle Model:</td>
                    <td><input type="text" name="vmodel" value="" size="10" placeholder="e.g 2010" /></td>
                </tr>
                <tr>
                    <td style="color: black">Vehicle Mass:</td>
                    <td><input type="text" name="vmass" value="" placeholder="e.g 1.3 Tons" /></td>
                </tr>
                <tr>
                    <td style="color: black">Vehicle Color:</td>
                    <td><select name="colors">
                            <option>White</option>
                            <option>Silver</option>
                            <option>Red</option>
                            <option>Black</option>
                            <option>Blue</option>
                        </select></td>
                </tr>
                <tr> 
                    <td style="color: black"> Was the vehicle in an Accident: </td>
                    <td>
                        <input type="checkbox" name="boo" value="" />Yes<br>
                        <input type="checkbox" name="boo" value="" />No<br>
                    </td>
                </tr>
                <tr>
                    <td style="color: black">How Many Times: </td>
                    <td><input type="text" name="number" value="" placeholder="Number(s)"/></td> 
                </tr>
                <tr>
                    <td style="color: black">Cause of Accidents:</td>
                    <td><input type="text" name="vaccident" value="" placeholder="e.g Drunk Driving" /></td>
                </tr>
                <tr>
                    <td style="color: black">Date and Place of Accident:</td>
            <div2><td><input type="date" name="adate" value="" placeholder="DD-MM-YY" /></div2>
            <input type="text" name="regions" value="" placeholder="e.g Windhoek, Rehoboth" />
                </td>
                </tr>
            </tbody>
        </table>

        <p style="text-align: center;"> <input type="reset" value="Clear" />
            <input type="submit" value="Next" /></p>

        <a href="agreement.jsp"><input type="button" value="Back" name="back"/></a>

</body>

</form>
</html>

Answer 1

可以通过jQuery轻松完成（将此库添加到标题部分），请检查以下脚本。

$('input[name=boo]').change(function(){
    if(this.value=="yes"){
        $(".accident").prop('disabled', false);
    } else {
        $(".accident").prop('disabled', true);
    }
});

我认为是或否应该是无线电，因为当时都不会发生;）。查看工作副本的实时demo。希望它有所帮助。

Answer 2

好的，这个解决方案是基于你的标题做的。

在<body>

之前添加javascript

<head>
<script language="Javascript">
function change()
{
    var element = document.getElementById('textfieldID'); //depend which text field you wanted to disabled then add ID attribute for that textfield
    var array = [];
    while(element) 
    {
       array.push(element);
       element.id = 'textfieldID' + '-processed'; 
       element = document.getElementById('textfieldID');
    }

    for(var i = 0; i < array.length; i++) 
    {
        array[i].id = 'textfieldID'; 
        if(document.mainform.boo.checked == true)
            array[i].disabled=true;
        else
            array[i].disabled=false; 
    } 
 }
</script>
</head>

为您的复选框添加onchange功能

  <tr> 
          <td style="color: black"> Was the vehicle in an Accident: </td>
          <td>
              <input type="checkbox" name="boo" value="" onchange="change();/>Yes<br>
              <input type="checkbox" name="boo" value="" onchange="change();/>No<br>
          </td>
  </tr>

如果要在选中复选框时禁用所有输入文本字段。然后在输入文本字段中添加所有相同的ID=""属性。希望它有所帮助

如何在表格中创建一个复选框，在同一个表格中启用或禁用文本输入？

2 个答案: