html - 如何根据 jquery/ajax 的其他输入字段中的选择值激活输入所需的输入？

Question

我有一个带有 2 个单选按钮的表单，如果我选择“是”，则会出现一个带有另外 2 对单选按钮的 DIV，如果第一个选择是，我需要required在 2 个新的单选按钮对中设置（“类型”和“做什么”）。如果在“做什么”单选对中选择了“移动号码”，则会出现第二个 DIV，其中包含一个输入字段，用户应在该字段中告诉用户要移动哪个号码.. 然后需要required设置该字段.. 我怎样才能动态地做到这一点？

仅供参考，我使用 Parsley JS Validator 来验证字段。

这是一段极简的代码：

function CompanyMobileFunction() {
  var x = document.getElementById("CompanyMobile");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}


function CompanyMobileMoveFunction() {
  var x = document.getElementById("MobileMove");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}


function CompanyMobileFunctionClose() {
  var x = document.getElementById("CompanyMobile");
  if (x.style.display === "none") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
}


function CompanyMobileMoveFunctionClose() {
  var x = document.getElementById("MobileMove");
  if (x.style.display === "none") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
}

<table style="width: 550px;">
  <tr>
  <td style="width: 250px;"><b>Mobile phone? (required) :</b></td>
  <td>

    <label class="container">Yes
      <input type="radio" id="CompanyMobileYES" name="CompanyMobile" onclick="CompanyMobileFunction()" value="yes">
      <span class="radio"></span>
    </label>

  </td>
  <td>

    <label class="container">No
      <input type="radio" id="CompanyMobileNO" name="CompanyMobile" onclick="CompanyMobileFunctionClose()" value="yes">
      <span class="radio"></span>
    </label>                          

  </td>
  </tr>
</table>              



<div id="CompanyMobile" style="display: none;">


<table style="width: 550px;">
  <tr>
  <td style="width: 250px;"><b>Type (required) :</b></td>
  <td>

    <label class="container">iPhone
      <input type="radio" id="iPhone" name="MobileOS" value="iPhone">
      <span class="radio"></span>
    </label>

  </td>
  <td>

    <label class="container">Android
      <input type="radio" id="Android" name="MobileOS" value="Android">
      <span class="radio"></span>
    </label>                          

  </td>
  </tr>
  <tr>
  <td style="width: 250px;"><b>What to do? (required) :</b></td>
  <td>

    <label class="container">New Number
      <input type="radio" id="CompanyMobileMoveNew" name="CompanyMobileMove" onclick="CompanyMobileMoveFunctionClose()" value="newnumber">
      <span class="radio"></span>
    </label>

  </td>
  <td>

    <label class="container">Move Number
      <input type="radio" id="CompanyMobileMoveMove" name="CompanyMobileMove" onclick="CompanyMobileMoveFunction()" value="movenumber">
      <span class="radio"></span>
    </label>                          

  </td>
  </tr>
</table>   


<div id="MobileMove" style="display: none;">

<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Number to move (required) :</b></td>
    <td align="left">
    
        <input class="form-control" style="width: 130px;" type="number" id="mobiletomove" name="mobiletomove" minlength="11111111" maxlength="99999999">
        
    </td>
  </tr>
</table>

</div>

标签： htmljqueryajax

Answer 1

您可以使用 jQuery、类和prop()来执行此操作。required即使输入被隐藏，请确保您正在移除道具。

function toggleRequired(){
  
  var isYesChecked = $('#CompanyMobileYES').is(':checked');     
  var isMoveChecked = $('#CompanyMobileMoveMove').is(':checked');  
  
  $('[name="MobileOS"]').prop('required', isYesChecked);
  $('[name="CompanyMobileMove"').prop('required', isYesChecked);     
  
  $('#mobiletomove').prop('required', isMoveChecked); 
}


function toggleHidden(){
  
  var isYesChecked = $('#CompanyMobileYES').is(':checked');     
  var isMoveChecked = $('#CompanyMobileMoveMove').is(':checked');  
  
  $('#CompanyMobile').toggleClass('hidden', !isYesChecked);    
  $('#MobileMove').toggleClass('hidden', !isYesChecked || !isMoveChecked ); 
}




$('[name="CompanyMobile"]').on('change',function () {
  toggleRequired();
  toggleHidden();

} );

$('[name="CompanyMobileMove"]').on('change',function () {
   toggleRequired();
   toggleHidden();

} );

.hidden {
  display: none;
}

input:required::after {
  content: '***';
  margin: 15px;
}

input:required {
  border: 1px solid red;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<table style="width: 550px;">
  <tr>
    <td style="width: 250px;"><b>Mobile phone? (required) :</b></td>
    <td>

      <label class="container">Yes
        <input id="CompanyMobileYES" name="CompanyMobile" type="radio" value="yes">
        <span class="radio"></span>
      </label>

    </td>
    <td>

      <label class="container">No
        <input id="CompanyMobileNO" name="CompanyMobile" type="radio" value="no">
        <span class="radio"></span>
      </label>

    </td>
  </tr>
</table>


<div class="hidden" id="CompanyMobile">


  <table style="width: 550px;">
    <tr>
      <td style="width: 250px;"><b>Type (required) :</b></td>
      <td>

        <label class="container">iPhone
          <input id="iPhone" name="MobileOS" type="radio" value="iPhone">
          <span class="radio"></span>
        </label>

      </td>
      <td>

        <label class="container">Android
          <input id="Android" name="MobileOS" type="radio" value="Android">
          <span class="radio"></span>
        </label>

      </td>
    </tr>
    <tr>
      <td style="width: 250px;"><b>What to do? (required) :</b></td>
      <td>

        <label class="container">New Number
          <input id="CompanyMobileMoveNew" name="CompanyMobileMove" type="radio" value="newnumber">
          <span class="radio"></span>
        </label>

      </td>
      <td>

        <label class="container">Move Number
          <input id="CompanyMobileMoveMove" name="CompanyMobileMove" type="radio" value="movenumber">
          <span class="radio"></span>
        </label>

      </td>
    </tr>
  </table>
</div>

<div class="hidden" id="MobileMove">

  <table style="width: 550px;">
    <tr>
      <td style="width: 250px;"><b>Number to move (required) :</b></td>
      <td align="left">

        <input class="form-control" id="mobiletomove" maxlength="99999999" minlength="11111111" name="mobiletomove" style="width: 130px;" type="number">

      </td>
    </tr>
  </table>

</div>