Question

我已经在该表单中创建了一个表单，我有2个隐藏字段，在检查单选按钮后显示。代码是

  <style>
  .selectContainer{
  display:none;
       }


 input[type=radio]:checked ~ .selectContainer {
      display:block;
    }

 </style>

/ html代码 /

 <label for="name"> Any Accompanying Person ?:</label>
  <input type="radio" name="yes" value="yes">Yes
   <div class="selectContainer">
  <label>Person Details</label>
         <p>

     <div style="padding-left:70px;"> 
  <input type="button" value="Add Person" onClick="addRow('dataTable')" /> 
<input type="button" value="Remove Person" onClick="deleteRow('dataTable')" /> 
  </div>
   </p>
   <table style="padding-left:50px;" id="dataTable" class="form" border="1"  >
    <tbody>
     <tr>
      <p>
     <td><input type="checkbox" name="chk[]" checked="checked" /></td>
     <td>
    <label>Name</label>
    <input type="text"  size="20" name="name[]" required>
      </td>
    <td>
     <label>Age</label>
     <input type="text"  size="20" name="age[]" required>
      </td>

      </p>
       </tr>
       </tbody>
      </table>
   <div class="clear"></div>
      </fieldset>

      </div>

    </div>



    <h3>Choose Your Payment Option</h3>
      <h1>

     <div style="padding-left:150px;">
   <input type="radio" name="type" value="visa">VISA/MASTER CARD:<br />
     <input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
     <input type="radio" name="type" value="neft">NEFT<br /><br/>

    </div>
   <label></label>
     <input type="submit" name="submit" value="submit"><br />


       </form>

这是我的表单。如果用户将检查“任何陪同人员？”单选按钮然后只有名称和年龄字段将显示我控制投掷样式。

问题：当用户提交表单而不检查“任何陪同人员？”然后所有名称和年龄字段都显示为必需的单选按钮。但是当用户点击“任何伴随人员”时，我需要这些字段吗？单选按钮。

怎么做？

Answer 1

$('#person').change(function () {

        $('#name').attr('required','required');
        $('#age').attr('required','required');

});

将ID人员提供给<input id="person" type="radio" name="yes" value="yes">Yes

将ID名称和年龄提供给<input type="text" size="20" name="name[]" id="name"> 将ID年龄设为<input type="text" size="20" name="age[]" required>

Answer 2

根据你的CSS

<style>
   .selectContainer{
     display:none;
                   }


    input[type=radio]:checked ~ .selectContainer {
      display:block;
    }

  </style>

.selectContainer没有显示，你正在设置它在选择单选按钮时显示。在这种情况下你不能选择单选按钮，因为你的CSS不可见。请为这个selectContainer块设置visibilty所以你可以选择radiobutton

然后使用ajax检查按钮被检查时

$('yourbutton').change(function () {
    if($(this).is(':on') {
        $('#name').attr('required');
        $('#age').attr('required');
    } 
});

我希望这能解决你的问题。

Answer 3

<html>
<head>

<style>
  .selectContainer{
  display:none;
       }


 input[type=radio]:checked ~ .selectContainer {
      display:block;
    }

 </style>

</head>
<body>
<form>

<label for="name"> Any Accompanying Person ?:</label>
  <input type="radio" name="yes" value="yes">Yes
   <div class="selectContainer">
  <label>Person Details</label>
         <p>

     <div style="padding-left:70px;"> 
  <input type="button" value="Add Person" onClick="addRow('dataTable')" /> 
<input type="button" value="Remove Person" onClick="deleteRow('dataTable')" /> 
  </div>
   </p>
   <table style="padding-left:50px;" id="dataTable" class="form" border="1"  >
    <tbody>
     <tr>
      <p>
     <td><input type="checkbox" name="chk[]" checked="checked" /></td>
     <td>
    <label>Name</label>
    <input type="text"  size="20" name="name[]" required>
      </td>
    <td>
     <label>Age</label>
     <input type="text"  size="20" name="age[]" required>
      </td>

      </p>
       </tr>
       </tbody>
      </table>
   <div class="clear"></div>
      </fieldset>

      </div>

    </div>



    <h3>Choose Your Payment Option</h3>
      <h1>

     <div style="padding-left:150px;">
   <input type="radio" name="type" value="visa">VISA/MASTER CARD:<br />
     <input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
     <input type="radio" name="type" value="neft">NEFT<br /><br/>

    </div>
   <label></label>
     <input type="submit" name="submit" value="submit"><br />


</form>
</body>
</html>

使用此代码。这不会给出任何错误。然后根据您的要求添加ajax代码或任何脚本。

如何启用禁用所需的字段？

3 个答案: