如果选择单选按钮需要输入字段

Question

我哪里做错了？

我有 2 个单选按钮。必选其一。

如果用户选择第一个并提交表单，那么信息应该发送给我。这很好用。

如果用户选择了第二个单选按钮，则还需要填写两个输入字段，并且表单应该无法 send/submit。不知何故，这个不起作用。数据即将到来，但如果我不填写这些必填字段，它仍然会通过。

你能帮帮我吗？

<div>
<p><b>Please choose</b></p>

  <br>

  <p>
    <input type="radio" name="mypuboption" id="myoneyear" tabindex="9" required value="one year" onclick="myFunctionyear(); document.getElementById('mypubweek').removeAttribute('disabled')">
    <br>1 year
  </p>

  <br>

  <p>
    <input type="radio" name="mypuboption" id="myownyear" tabindex="10" required value="own year" onclick="myFunctionyear(); myweekselection(); document.getElementById('mypubweek').removeAttribute('disabled')">
    <br>own year
  </p>

  <p id="mypubweek" style="display:none;" align="center">
    <br>
    <input type="week" class="form-control" id="mypubstart" name="mypubstart" tabindex="11" style="width:180px; margin:auto;">
    <br>
    <select id="myownweek" name="myownweek" tabindex="12" style="width:180px; height:34px; border-radius:5px; border-color:#D1D1D1;">
      <option value="">choose</option>
      <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
      <option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
      <option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
      <option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option>
      <option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
      <option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option>
      <option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option>
      <option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option>
    </select>
  </p>

  <script>
    function myFunctionyear() {
      var checkBox = document.getElementById("myownyear");
      var text = document.getElementById("mypubweek");
      if (checkBox.checked == true){
        text.style.display = "block";
      } else {
        text.style.display = "none";
      }
    }
  </script>

  <script>
    $(function myweekselection () {
      $('input[id="myownyear"]').change(function () {
        if($(this).val() === 'value') {
          $('#myownweek').attr('required', true);
        } else {
          $('#myownweek').removeAttr('required');
        }
      });
    });
  </script>
</div>

Answer 1

将输入设置为必需用于 .prop 而不是 .attr。此外，所有这些功能都不需要根据点击来触发，只需检测单选按钮的变化即可。

$("input[type='radio']").on("change", function(){
   if($('#secondInput').is(':checked')){
    $("input[type='text']").show();
    $("input[type='text']").prop('required',true);
  } else {
    $("input[type='text']").hide();
    $("input[type='text']").prop('required',false);
  }
});

input[type="text"] {
  display:none;
}

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

  1<input type="radio" name="rad" value="1" required> 
  2<input type="radio" id="secondInput" name="rad" value="2">
  <input type="text">
  <input type="text">

  <button type="submit">Submit</button>
</form>

如果选择单选按钮需要输入字段

if radio button is selected require the input field

html

radio-button

conditional-statements

required