php - 如果选中，jQuery 启用动态输入文本

Question

我正在使用 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>

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

生成表格:

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

Answer 1

尝试向上遍历到 <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);
    });
});

fiddle :

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