Question

我有一个添加按钮。单击它时，我想生成多个输入字段，例如单选按钮和日期选择器。为此，我正在使用jQuery附加功能。我能够生成多个字段，但我的收音机按钮却无法正常工作正确。有人可以帮我吗？

请看看我的JSFiddle

这是我的代码：

$('body').on('focus', ".datepicker", function() {
  $(this).datepicker();
});

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  var id = 1;
  var idt = 1;
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      id++;
      idt++;
      $(wrapper).append('<div class="input-line-control removeMe"><div class="col-md-5"><div class="form-group"><div class="radio-group"><input type="radio" id="id" name="S_gender" checked><label class="radioLabel" for="id">Male</label><input type="radio" id="idt" name="S_gender"><label class="radioLabel" for="idt">female</label></div></div></div><div class="col-md-5"><div class="form-group"><input type="date"></div></div><div class="col-md-2"><button class="btn btn-danger remove-date"><i class="fa fa-remove"></i>Remove</button></div></div>'); //add input box
    }
  });

  $(wrapper).on("click", ".remove-date", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('div.removeMe').remove();
    x--;
  })
});

.myDate {
  margin: 10px 0 10px 0;
}

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

.radioLabel {
  color: #9a929e;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 30px;
  margin-bottom: 0px;
}

input[type=radio]:checked+label {
  color: #fff;
  background-color: #3c7ab7;
}

.radio-group {
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  display: inline-block;
  margin: 0px 0px 8px;
  border-radius: 10px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <title>Bootstrap Dynamic DatePicker</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" type="text/css">
  <!-- Include Bootstrap Datepicker -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />

  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <style>

  </style>
</head>

<body>
  <div class="col-md-12">

    <button class="btn btn-primary add_field_button"><i class="fa fa-plus"></i> Add More</button>
  </div>


  <div class="input_fields_wrap">
    <!-- Dynamic Fields go here -->
  </div>

</body>

</html>

Answer 1

单选按钮应具有唯一的ID和名称才能正常工作，这是我为您更新的代码...

$('body').on('focus',".datepicker", function(){
    $(this).datepicker();
});

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    var id = 1;
     var idt = 1;
    $(add_button).click(function(e){ //on add input button click
    var rdio=$('.input_fields_wrap input[type=radio]').length;
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
             id++;
             idt++; 
            $(wrapper).append('<div class="input-line-control removeMe"><div class="col-md-5"><div class="form-group"><div class="radio-group"><input type="radio" id="id_'+rdio+'" name="S_gender_'+rdio+'" checked><label class="radioLabel" for="id_'+rdio+'">Male</label><input type="radio" id="idt_'+rdio+'" name="S_gender_'+rdio+'"><label class="radioLabel" for="idt_'+rdio+'">female</label></div></div></div><div class="col-md-5"><div class="form-group"><input type="date"></div></div><div class="col-md-2"><button class="btn btn-danger remove-date"><i class="fa fa-remove"></i>Remove</button></div></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove-date", function(e){ //user click on remove text
        e.preventDefault(); $(this).closest('div.removeMe').remove(); x--;
    })
});

我也更新了小提琴 https://jsfiddle.net/hka3ugos/

使用jQuery附加时单选按钮不起作用

1 个答案: