jQuery启用动态输入文本，如果勾选 - jQuery enable dynamic input text if checked

我正在PHP上工作，以生成一个表格内部例如:

<table class="table table-hover">
    <thead>
        <tr>
            <th class="table-checkbox">
            </th>
            <th>
                Description
            </th>
            <th>
                Qty
            </th>
            <th>
                Input Qty
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="grade odd" role="row">
            <td class="verti-align">
                <label>
                    <div class="checker" id="uniform-goods[]"><span><input type="checkbox" class="goods[]" value="13" name="goods[]" id="goods[]" style="cursor:pointer;" data-title="Bump" data-set="#goods_table .goods"></span></div>
                </label>
            </td>
            <td class="verti-align sorting_1">
                Bump
            </td>
            <td class="verti-align">
                76
            </td>
            <td>
                <input type="text" name="qty[]" id="qty[]" class="form-control input-sm" value="76" disabled="disabled">
            </td>
        </tr>
        <tr class="grade even" role="row">
            <td class="verti-align">
                <label>
                    <div class="checker" id="uniform-goods[]"><span><input type="checkbox" class="goods[]" value="17" name="goods[]" id="goods[]" style="cursor:pointer;" data-title="Durms" data-set="#goods_table .goods"></span></div>
                </label>
            </td>
            <td class="verti-align sorting_1">
                Durms
            </td>
            <td class="verti-align">
                889
            </td>
            <td>
                <input type="text" name="qty[]" id="qty[]" class="form-control input-sm" value="889" disabled="disabled">
            </td>
        </tr>
        <tr class="grade odd" role="row">
            <td class="verti-align">
                <label>
                    <div class="checker" id="uniform-goods[]"><span><input type="checkbox" class="goods[]" value="16" name="goods[]" id="goods[]" style="cursor:pointer;" data-title="Guitar" data-set="#goods_table .goods"></span></div>
                </label>
            </td>
            <td class="verti-align sorting_1">
                Guitar
            </td>
            <td class="verti-align">
                87
            </td>
            <td>
                <input type="text" name="qty[]" id="qty[]" class="form-control input-sm" value="87" disabled="disabled">
            </td>
        </tr>
    </tbody>
</table>

如果复选框在自己的表行<tr>中勾选，我需要帮助从input="text"中删除attr disable。我应该在生成这个表时放置唯一选择器吗?

表生成:

<?php foreach ($goodswo as $good):?>
<tr class="odd grade">
    <td class="verti-align">
        <label>
            <input type="checkbox" class="goods[]" value="<?php echo htmlspecialchars($good->id,ENT_QUOTES,'UTF-8');?>" name="goods[]" id="goods[]" style="cursor:pointer;" data-title="<?php echo htmlspecialchars($good->description,ENT_QUOTES,'UTF-8');?>" data-set="#goods_table .goods"/>
        </label>
    </td>
    <td class="verti-align">
        <?php echo htmlspecialchars($good->description,ENT_QUOTES,'UTF-8');?>
    </td>
    <td class="verti-align">
        <?php echo htmlspecialchars($good->qty,ENT_QUOTES,'UTF-8');?>
    </td>
    <td>
        <input type="text" name="qty[]" id="qty[]" class="form-control input-sm" value="<?php echo htmlspecialchars($good->qty,ENT_QUOTES,'UTF-8');?>" disabled="disabled">
    </td>
</tr>
<?php endforeach;?>

jQuery脚本:

$(document).ready(function() {
    $('table input[name="goods[]"]').change(function() {
        $('input[name="qty[]"]').attr('disabled', !this.checked)
    });
});

http://jsfiddle.net/hw079m34/

尝试向上遍历到<tr>(使用parents())，然后再次返回(使用find())。使用$(this)标记从哪里开始。您不需要使用任何唯一的id或诸如此类的东西。实际上，您不必对代码进行太多更改，即可使其按预期工作:

$(document).ready(function() {
    $('table input[name="goods[]"]').change(function() {
        $(this).parents("tr").find('input[name="qty[]"]').attr('disabled', !this.checked);
    });
});

小提琴:

http://jsfiddle.net/hw079m34/1/

DEMO

$(document).ready(function () {
    $('table input[name="goods[]"]').change(function () {
        var index = $(this).closest('tr').index('tr')-1;
        $('input[name="qty[]"]').eq(index).prop('disabled', !this.checked)
    });
});