Jquery Multiple Check Box Enable Text Field

from previous questions checkbox enable onload to display other elements ok, since none of these worked, im going to have to just display my actual code instead of an example. i wa

Solution 1:

Updated Answer

Given what you seem to be trying to accomplish I think using classes and data attributes might serve as the easiest and most flexible solution.

OP's HTML (Modified)

<table>
<tr>
    <td>blah</td>
    <td>
        <input type='checkbox' name='a1' class="group_ctrl" data-group="group_a" id='checker'>
    </td>
    <td></td>
</tr>
<tr>
    <td>
        <div align="right">a1:</div>
    </td>
    <td>
        <input id="tb1" type='text' class="group_a" name='a1_1' size='25' maxlength='5' value='a1_1'>
    </td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>
        <div align="right">a2:</div>
    </td>
    <td>
        <input id="tb2" type='text' class="group_a" name='a2_2' size='25' maxlength='5' value='a2_2'>
    </td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>
        <div align="right">a3:</div>
    </td>
    <td>
        <input id="tb3" type='text' class="group_a" name='a3_3' size='25' maxlength='5' value='a3_3'>
    </td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>
        <div align="center">Activate Something Else</div>
    </td>
    <td>
        <input type='checkbox' name='b1' class="group_ctrl" data-group="group_b" id='checker2' checked=checked>
    </td>
    <td></td>
</tr>
<tr>
    <td>
        <div align="right">b1:</div>
    </td>
    <td>
        <input id="tb4" name="b1_1" class="group_b" type="text" size="25" maxlength='5' value='b1_1'>
    </td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>
        <div align="right">b2:</div>
    </td>
    <td>
        <input id="tb5" name="b2_2" class="group_b" type="text" size="25" maxlength='5' value='b2_2'>
    </td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>
        <div align="right">b3:</div>
    </td>
    <td>
        <input id="tb6" name="b3_3" class="group_b" type="text" size="25" maxlength='5' value='b3_3'>
    </td>
    <td>&nbsp;</td>
</tr>
</table>

JQuery

$(document).ready(function() {
    $('.group_ctrl').change(function () {
        // gets data-group value and uses it in the outer selector
        // to select the inputs it controls and sets their disabled 
        // property to the negated value of it's checked property 
        $("." + $(this).data("group")).prop('disabled', !this.checked);
    }).change();
});

fiddle

I have given every input you want to disable/enable a class. E.g. group_[a|b] Then I gave the check-box controls a class group_ctrl and a data attribute named group (data-group) with the corresponding group class it is responsible for controlling as the value. You can duplicate this pattern as many times as needed. E.g. group_c, group_d, group_e... etc.

Solution 2:

Shortest :)

jsfiddle

$(document).ready(function () {
    $('input[type=checkbox]').change(function () {
         $(this).nextUntil('input[type=checkbox]').prop('disabled', !this.checked);
    }).change();
});

.nextUntil()

.prop()

Solution 3:

Demo

Use nextUntil() to find all text boxes until next check box and toggle them. You are using the IDs of elements, please note that you may also use the type of the element to select and work on them all.

$(document).ready(function () {
    // add click function and then call toggleInputs on every checkbox on the page
    $('input[type=checkbox]').click(function () {
        toggleInputs($(this));

    }).each(function () {
        toggleInputs($(this));
    });
});

function toggleInputs(element) {
    // careful, it will find all elements until next checkbox
    element.nextUntil('input[type=checkbox]').prop('disabled', !element.prop('checked'));
}

But seriously, you need to structure the HTML code properly. if you do, you can use parent(), siblings() etc functions much more effectively and meaningfully.

Solution 4:

I think you want to do like this:

<form>
<input type="checkbox" name="detailsgiven" id="checker" >
<br>
<input type='text' name="details" id="tb1" value='box1'>
<br>
<input type='text' name="details" id="tb2" value='box2'>
<br>
<input type='text' name="details" id="tb3" value='box3'>
<br><br>

<input type="checkbox" name="detailsgiven" id="checker2" >
<br>
<input type='text' name="details" id="tb4" value='box1'>
<br>
<input type='text' name="details" id="tb5" value='box2'>
<br>
<input type='text' name="details" id="tb6" value='box3'>
<br>
</form>
<script>
toggleInputs($('#checker'));

$('#checker').click(function () {
toggleInputs($(this));
});

function toggleInputs(element) {
if (element.prop('checked')) {
/* 
$('#tb1').prop('disabled', false);
$('#tb2').prop('disabled', false);
$('#tb3').prop('disabled', false);
*/
$(element).parent('form').find('input[type=text]').attr('disabled',false);
} else {
/*
$('#tb1').prop('disabled', true);
$('#tb2').prop('disabled', true);
$('#tb3').prop('disabled', true);
*/
$(element).parent('form').find('input[type=text]').attr('disabled',true);
}
}
</script>