Question

如代码所示，我有两个动态测试输入字段，一个带单选按钮，另一个带复选框。

带复选框的那个正在工作，而带单选按钮则没有。有人可以帮助解决这里的问题吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <script>
  $(document).ready(function($) {
    $('input.maxtickets_enable_cb').change(function() {
      if ($(this).is(':checked')) $(this).parent().children('div.max_tickets').show();
      else $(this).parent().children('div.max_tickets').hide();
    }).change();
    $('#contact_form').bootstrapValidator({
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          first_name: {
            validators: {
              stringLength: {
                min: 2,
              },
              notEmpty: {
                message: 'your first name'
              }
            }
          }
        }
      })
      .on('success.form.bv', function(e) {
        $('#success_message').slideDown({
          opacity: "show"
        }, "slow")
        $('#contact_form').data('bootstrapValidator').resetForm();
        e.preventDefault();
        var $form = $(e.target);

        var bv = $form.data('bootstrapValidator');

        $.post($form.attr('action'), $form.serialize(), function(result) {
          console.log(result);
        }, 'json');
      });
  });
  </script>
  <script type="text/javascript">
  $(function() {
    $("input[name='chkPassPort']").click(function() {
      if ($("#chkYes").is(":checked")) {
        $("#dvPassport").show();
      } else {
        $("#dvPassport").hide();
      }
    });
  });
  </script>
</head>
<div class="row">
  <div class="col-md-10" style="padding: 0; height:20%;">
    <div class="panel panel-default">
      <span>Do you have Passport?</span>
      <label for="chkYes">
        <input type="radio" id="chkYes" name="chkPassPort" /> Yes
      </label>
      <label for="chkNo">
        <input type="radio" id="chkNo" name="chkPassPort" /> No
      </label>
      <hr />
      <div id="dvPassport" style="display: none">
        Passport Number:
        <input type="text" id="txtPassportNumber" />
      </div>
      <form action="">
        <div id="opwp_woo_tickets">
          <div>
            <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
            <div class="max_tickets">
              <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
            </div>
          </div>
        </div>
      </form>
    </div>
    <!-- /.container -->
    <div class="container">
      <form class="well form-horizontal" action="" method="post" id="contact_form">
        <fieldset>
          <div class="form-group">
            <label class="col-md-4 control-label">First Name</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input name="first_name" placeholder="First Name" class="form-control" type="text">
              </div>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

Answer 1

只需将此代码移至$（document）.ready函数即可。 https://jsfiddle.net/6qvy102s/

     $("input[name='chkPassPort']").click(function () {
                if ($("#chkYes").is(":checked")) {
                    $("#dvPassport").show();
                } else {
                    $("#dvPassport").hide();
                }           
});

Answer 2

这里有几个问题：

您检查无线电输入的功能不需要位于单独的<script>标记中，而应位于主$(document).ready功能中。
不要将$("input[name='chkPassPort']").click(function(){})置于另一个＆＃34;功能＆＃34;。

通过对代码进行这些更改，您可以看到无线电应答：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <script>
    $(document).ready(function($) {

      //Moved inside $(document).ready()
      $("input[name='chkPassPort']").click(function() { 
        if ($("#chkYes").is(":checked")) {               
          $("#dvPassport").show();           
        } else {               
          $("#dvPassport").hide();           
        }       
      });

      $('input.maxtickets_enable_cb').change(function() {
        if ($(this).is(':checked')) $(this).parent().children('div.max_tickets').show();
        else $(this).parent().children('div.max_tickets').hide();
      }).change();
      $('#contact_form').bootstrapValidator({
          feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
          },
          fields: {
            first_name: {
              validators: {
                stringLength: {
                  min: 2,
                },
                notEmpty: {
                  message: 'your first name'
                }
              }
            }
          }
        })
        .on('success.form.bv', function(e) {
          $('#success_message').slideDown({
            opacity: "show"
          }, "slow")
          $('#contact_form').data('bootstrapValidator').resetForm();
          e.preventDefault();
          var $form = $(e.target);

          var bv = $form.data('bootstrapValidator');

          $.post($form.attr('action'), $form.serialize(), function(result) {
            console.log(result);
          }, 'json');
        });
    });
  </script>
</head>
<div class="row">
  <div class="col-md-10" style="padding: 0; height:20%;">
    <div class="panel panel-default">
      <span>Do you have Passport?</span>
      <label for="chkYes">
        <input type="radio" id="chkYes" name="chkPassPort" />Yes
      </label>
      <label for="chkNo">
        <input type="radio" id="chkNo" name="chkPassPort" />No
      </label>
      <hr />
      <div id="dvPassport" style="display: none">
        Passport Number:
        <input type="text" id="txtPassportNumber" />
      </div>

      <form action="">
        <div id="opwp_woo_tickets">
          <div>
            <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">
            <div class="max_tickets">
              <input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
            </div>
          </div>
        </div>
      </form>
    </div>
    <!-- /.container -->


    <div class="container">

      <form class="well form-horizontal" action="" method="post" id="contact_form">
        <fieldset>

          <div class="form-group">
            <label class="col-md-4 control-label">First Name</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input name="first_name" placeholder="First Name" class="form-control" type="text">
              </div>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

＆＃13;

Answer 3

$( document ).ready(function() {
    $("input[name='chkPassPort']").click(function () {
        if ($("#chkYes").is(":checked")) {
            $("#dvPassport").show();
        } else {
            $("#dvPassport").hide();
        }
    });
});

动态输入文本字段不随Jquery中的单选按钮而改变

3 个答案: