如何使启用禁用所需的文件 - How to make enable disable the required filed?

>我已经在该表单中创建了一个表单，我有 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>

这是我的表格，如果用户将选中"任何陪同人员？"单选按钮，那么只有姓名和年龄字段将显示我正在控制投掷样式。

问题：当用户提交表单而不选中"任何陪同人员？"单选按钮时，所有姓名和年龄字段都显示为必填。但是当用户单击"任何陪同人员？"单选按钮时，我需要这些字段是必需的。

怎么做？

$('#person').change(function () {
        $('#name').attr('required','required');
        $('#age').attr('required','required');
});

将身份证件交给<input id="person" type="radio" name="yes" value="yes">Yes

提供 ID 名称和年龄以<input type="text" size="20" name="name[]" id="name">将身份证年龄指定为<input type="text" size="20" name="age[]" required>

根据你的 CSS

<style>
   .selectContainer{
     display:none;
                   }

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

不会显示 .selectContainer，而是在选择单选按钮时将其设置为显示。在这种情况下，您无法选择单选按钮，因为它由于您的 CSS 而不可见。设置此选择容器块的可见性，以便能够选择单选按钮

之后使用 ajax 检查无论何时选中按钮，它

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

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

<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 代码或任何脚本。