How to handle jquery creation of dynamic bootstrap card?

Question

I am trying to create a fun game. The user can enter his name and email. After clicking "Add" button,the new card will be created with the form which includes checkboxes "One" and "Two" .Based on choice of checkboxes, the user can choose between 1 and 2 fieldsets.The fieldsets are to be disabled initially. But because of something wrong on jquery code,the newly created card comes out as the enabled fieldsets.

 $(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> 

May be something is wrong with my thinking.Please point out. Thanks in advance.

Answer 1

The new value of HTML Fields, must be set before append

From what I understand, you're trying to initialize fields after "amount" as off, if that's it:

Set "disabled" in "Select" created in htmlcard The new html instance created in jquery is not set like a disabled

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

Check a pen working in here

Answer 2

The other answer provides a fix by changing the HTML.

In your first load, you call:

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

you can make the same call (with a small adjustment) after adding your new HTML:

var htmlcard = "<div class='card px-3'>...";
var newcard = $(htmlcard).appendTo("body");
newcard.find(".oneFieldset").prop('disabled', true);
newcard.find(".twoFieldset").prop('disabled', true);

---

This will then bring you to your next problem - event binding on dynamically added elements - which you can fix by adding the event handlers when you add the html or you can use event delegation with tree navigation to change only the relevant fieldset:

  $(document).on("change", ".one", function() {
    $(this).closest(".card").find(".oneFieldset").prop("disabled", !this.checked);
  });

 $(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>"; var newcard = $(htmlcard).appendTo("body"); newcard.find(".oneFieldset").prop('disabled', true); newcard.find(".twoFieldset").prop('disabled', true); }); $(document).on("change", ".one", function() { $(this).closest(".card").find(".oneFieldset").prop("disabled", !this.checked); }); $(document).on("change", ".two", function() { $(this).closest(".card").find(".twoFieldset").prop("disabled", !this.checked); }); }); 

 <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>