javascript - 如何处理jquery创建动态引导卡？

Question

我正在尝试创建一个有趣的游戏。用户可以输入他的姓名和电子邮件。点击“添加”按钮后，将创建新卡片，其形式包括复选框“一个”和“两个”。根据复选框的选择，用户可以在 1 到 2 个字段集之间进行选择。这些字段集最初将被禁用。但由于 jquery 代码出现问题，新创建的卡片作为启用的字段集出现。

$(document).ready(function() {

  $(".oneFieldset").prop('disabled', true);
  $(".twoFieldset").prop('disabled', true);

  $("#add").click(function() {

    var name = $("#name").val();
    var email = $("#email").val();

    var htmlcard = "<div class='card px-3'><div class='card-header'>" + name + "|" + email + "</div><div class='card-body'><div class='card-title'><div class='form-check form-check-inline'><input class='form-check-input one' type='checkbox' value='one'><br><label class='form-check-label' for='one'>One</label></div><div class='form-check form-check-inline'><input class='form-check-input two' type='checkbox' value='two'><label class='form-check-label' for='two'>Two</label></div></div><form><div class='row'><div class='col-md-4'><fieldset class='oneFieldset'><legend>1</legend><label for='NoOne' class='col-form-label'>Choose</label><select class='form-control w-30' id='NoOne' placeholder='Choose'><option value='a'>A</option><option value='b'>B</option><option value='c'>C</option></select></fieldset></div><div class='col-md-8'><fieldset class='twoFieldset'><legend>2</legend><div class='row'><div class='form-group col'><label for='NoTwo' class='col-form-label'>Select Package Amount</label><select class='form-control w-30' id='NoTwo' placeholder='Choose'><option value='a'>A</option><option value='b'>B</option><option value='c'>C</option></select></div><div class='form-group col'><label for='NoThree' class='col-form-label'>Select Package Amount</label><select class='form-control w-30' id='NoThree' placeholder='Choose'><option value='x'>X</option><option value='y'>Y</option><option value='z'>Z</option></select></div></div></fieldset></div></div></form><br><a href='#' class='btn btn-primary btn-lg'>Choose</a></div></div>";

    $("body").append(htmlcard);

  });

  $(".one").change(function() {
    if (this.checked) {
      $(".oneFieldset").prop('disabled', false);
    }
    if (this.checked == false) {
      $(".oneFieldset").prop('disabled', true);
    }
  });

  $(".two").change(function() {
    if (this.checked) {
      $(".twoFieldset").prop('disabled', false);
    }
    if (this.checked == false) {
      $(".twoFieldset").prop('disabled', true);
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <form class="form-control my-3 mx-auto w-50">
    <label for="username">Enter username</label>
    <input type="text" name="username" class="form-control" id="name"><br>
    <label for="email">Enter email</label>
    <input type="email" name="email" class="form-control" id="email"><br>
    <a href="#" id="add" class="btn btn-primary mb-3 btn-lg">Add</a>
  </form>
</div>
<div class="card px-3">
  <div class="card-header">
    Choose something
  </div>
  <div class="card-body">
    <div class="card-title">
      <div class="form-check form-check-inline">
        <input class="form-check-input one" type="checkbox" value="one">
        <br>
        <label class="form-check-label" for="one">One</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input two" type="checkbox" value="two">
        <label class="form-check-label" for="two">Two</label>
      </div>
    </div>
    <form>
      <div class="row">
        <div class="col-md-4">
          <fieldset class="oneFieldset">
            <legend>1</legend>
            <label for="NoOne" class="col-form-label">Choose</label>
            <select class="form-control w-30" id="NoOne" placeholder="Choose">
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="c">C</option>
            </select>
          </fieldset>
        </div>
        <div class="col-md-8">
          <fieldset class="twoFieldset">
            <legend>2</legend>
            <div class="row">
              <div class="form-group col">
                <label for="NoTwo" class="col-form-label">Select Package Amount</label>
                <select class="form-control w-30" id="NoTwo" placeholder="Choose">
                  <option value="a">A</option>
                  <option value="b">B</option>
                  <option value="c">C</option>
                </select>
              </div>
              <div class="form-group col">
                <label for="NoThree" class="col-form-label">Select Package Amount</label>
                <select class="form-control w-30" id="NoThree" placeholder="Choose">
                  <option value="x">X</option>
                  <option value="y">Y</option>
                  <option value="z">Z</option>
                </select>
              </div>
            </div>
          </fieldset>
        </div>
      </div>
    </form>
    <br>
    <a href="#" class="btn btn-primary btn-lg">Choose</a>
  </div>
</div>
<br>

可能我的想法有问题，请指出。提前致谢。

Answer 1

HTML Fields的新值，必须在append之前设置

据我了解，您正在尝试将“金额”之后的字段初始化为关闭，如果是这样的话:

在htmlcard中创建的“选择”中设置“禁用”在jquery中创建的新html实例没有像禁用一样设置

<select disabled class='form-control w-30' id='NoTwo' placeholder='Choose'>

检查 here 中工作的笔