JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset>
<form>
<div class='controls'>
<label>Select all
<input type="checkbox" name="all" id="all" class="span1" />
</label>
</div>
<div class='clone_me'>
<div class='me'>
<label>Chekbox1
<input type="checkbox" name="ck1" id="ck1" />
</label>
<div>
<input type='text' name='text[1][]' disabled='disabled' id='text1' />
<input type='text' name='text[1][]' disabled='disabled' id='text2' />
<input type='text' name='text[1][]' disabled='disabled' id='text3' />
<input type='text' name='text[1][]' disabled='disabled' id='text4' />
</div>
</div>
</div>
<div class='clone_me'>
<div class='me'>
<label>Chekbox2
<input type="checkbox" name="ck1" id="ck1" />
</label>
<div>
<input type='text' name='text[2][]' id='text1' disabled='disabled' />
<input type='text' name='text[2][]' id='text2' disabled='disabled' />
<input type='text' name='text[2][]' id='text3' disabled='disabled' />
<input type='text' name='text[2][]' id='text4' disabled='disabled' />
</div>
</div>
</div>
<div class='clone_me'>
<div class='me'>
<label>Chekbox3
<input type="checkbox" name="ck1" id="ck1" />
</label>
<div>
<input type='text' name='text[3][]' id='text1' disabled='disabled' />
<input type='text' name='text[3][]' id='text2' disabled='disabled' />
<input type='text' name='text[3][]' id='text3' disabled='disabled' />
<input type='text' name='text[3][]' id='text4'...
JavaScript
$(document).ready(function () {
$('form').on('change', 'input[type=checkbox]', function (e) {
console.log('on change');
var checkbox = $(this);
/*
* If any checkbox is checked, find the nearest input text and enabled user to key in value
*/
checkbox.closest('.me').find('input[type=text]').prop('disabled', !checkbox.is(':checked'));
});
$('#all').on('click', function () {
$(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
$(this).closest('fieldset').find('input:text').prop('disabled',!this.checked);
});
});