Disable/enable Codeigniter input field with jquery - php

Question

I have the following code for input fields:
echo form_label('Name :', "first_name[0]");
echo form_input("first_name[0]", set_value("first_name[0]"));
echo form_error("first_name[0]");
This outputs the following HTML code:
<label for="first_name[0]"> Name: </label>
<input type="text" name="first_name[0]" value>
This is part of a form that accommodates 2-5 participants. The idea is to have 2 name fields at least active, while the other 3 are disabled by default and you can activate them with a checkbox.
I am not very good with JQuery and am unable to accomplish this.
Is it possible with jquery again, to clear any input if the checkbox is selected to activate the field, and then is unchecked after that?

Answer 1

I'm not sure, but I believe you are looking for something like this (JSFiddle):
<div class="participant">
<label for="first_name[0]"> Name: </label>
<input type="text" name="first_name[0]" value>
</div>
<div class="participant">
<label for="first_name[0]"> Name: </label>
<input type="text" name="first_name[0]" value>
</div>
<div class="participant">
<label for="first_name[0]"> Name: </label>
<input type="text" name="first_name[0]" value>
</div>
<div class="participant">
<label for="first_name[0]"> Name: </label>
<input type="text" name="first_name[0]" value>
</div>
<div class="participant">
<label for="first_name[0]"> Name: </label>
<input type="text" name="first_name[0]" value>
</div>
<button id="add-participant">
Add Another
</button>
js
$(".participant:gt(1)").addClass("hidden");
$("#add-participant").on("click", function() {
$(".participant.hidden").first().removeClass("hidden");
if(!$(".participant.hidden").length) {
$(this).hide();
}
});
Only the first 2 will be visible at first, but you can click the button to add more... up to 5.
Or... something like this would probably be better... starting from just a single participant and creating more if needed... with the ability to remove.
JSFiddle