Question

我正在尝试根据单选按钮输入显示隐藏的div。选中“是”则应显示隐藏的div，选中“否”则应隐藏div。

我不知道为什么它不起作用。我已经检查了堆栈上的其他参考，但这没有帮助。

$(function() {
  $("input[name='otherppt']").click(function() {
    if ($("#otheryes").is(":checked")) {
      $("#otherdoi").show();
      $("#otherdoi input").prop("required", true);
    } else {
      $("#otherdoi").hide();
      $("#otherdoi input").prop("required", false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-group">
  <input type="radio" id="otheryes" name="otherppt" class="other_ppt" required value='yes' data-msg='Please select any one of these.' />
  <input type="radio" id="otherno" name="otherppt" class="other_ppt" required value='no' data-msg="Please choose any one of these." />
</div>
<div class="form-group row" id="otherdoi" style="display:none">
  <div class="col-mobi-12 col-xs-6">
    <label class=""><b>Date of Issue <span>(Day-Month-Year)</span> <span class="txt-red">*</span></b></label>
  </div>
  <div class="col-mobi-12 col-xs-6 col-md-5">
    <div class="input-append default date dob-dates" data-date="19-03-2019" data-date-format="M dd, yyyy">
      <span class="form-date-field">
        <input type="text" name="date_of_issue" class="required date-of-issue" autocomplete=off readonly data-msg='Please enter date of issue.' placeholder="DD-MM-YYYY" />
         </span>
      <i class="clear">&nbsp;</i>
    </div>
  </div>
</div>

Answer 1

确保您的代码中没有其他输入[name ='otherppt']。也许在不同的文件（小部件/弹出窗口）上

Answer 2

$(document).on('change','.other_ppt', function() {
   if ($("#otheryes").is(":checked")) {
       $("#otherdoi").show();
       $("#otherdoi input").attr("required", true);
   } else {
       $("#otherdoi").hide();
       $("#otherdoi input").attr("required", false);
   }
});

Answer 3

我刚刚检查了您的代码是否工作正常，可能是CDN链接损坏。再试一次

<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>

</style>
</head>
  <body>
<div class="radio-group">    
       <input type="radio" id="otheryes" name="otherppt" class="other_ppt" required value='yes' data-msg='Please select any one of these.' />
       <input type="radio" id="otherno" name="otherppt" class="other_ppt" required value='no' data-msg="Please choose any one of these." />
</div>
    <div class="form-group row" id="otherdoi" style="display:none">
    <div class="col-mobi-12 col-xs-6">
    <label class=""><b>Date of Issue <span>(Day-Month-Year)</span> <span class="txt-red">*</span></b></label>
    </div>
    <div class="col-mobi-12 col-xs-6 col-md-5">
    <div class="input-append default date dob-dates" data-date="19-03-2019" data-date-format="M dd, yyyy">
    <span class="form-date-field">
    <input type="text" name="date_of_issue" class="required date-of-issue" autocomplete=off readonly data-msg='Please enter date of issue.' placeholder="DD-MM-YYYY" />
     </span>
    <i class="clear">&nbsp;</i>
    </div>
    </div>
   </div>
   <script>
        $(function() {
            $("input[name='otherppt']").click(function() {
                if ($("#otheryes").is(":checked")) {
                    $("#otherdoi").show();
                    $("#otherdoi input").prop("required", true);
                } else {
                    $("#otherdoi").hide();
                    $("#otherdoi input").prop("required", false);
                }
            });
        });

    </script>
   </body>

 </html>

根据选中的单选按钮显示隐藏div

3 个答案: