Question

帮帮我。我的代码有问题：

我有这个脚本：

<script>
$('td input[type="checkbox"]').onclick(function () {
  $(this).closest('tr').find('input[type="text"]').prop('disable', !this.checked);
}).change();
</script>

表格：

       <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>#</th>
                                    <th>Activity Name</th>
                                    <th>SkillsID</th>
                                    <th>Percentage</th>
                                    <th><center>Time Estimate Overhead (min)</center>                             </th>
                                    <th><center>Time Estimate Per Unit (min)</center></th>
                                    <th><center>Total Time (min)</center></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>    
                                    <td><input type="checkbox" class="others1">
                                    <td>1</td>
                                    <td>Preparation</td>
                                    <td class="center">1,7,8</td>
                                    <td class="center"></td>
                                    <td class="center"><input type="text" id="cb1_teo_text" name="cb1_teo_text" style="width: 100%;" disabled=""></td>
                                    <td class="center"><input type="text" id="cb1_tep_text" name="cb1_tep_text" style="width: 100%;" disabled=""></td>
                                    <td class="center"><span id="totaTime1"/></td>

                                </tr>
                                <tr>
                                <td><input type="checkbox" name="others2"></td>
                                <td>2</td>
                                <td>Review of Materials</td>
                                <td class="center">1,7,8</td>
                                <td class="center"></td>
                                <td class="center"><input type="text" name="cb2_teo_text" style="width: 100%;" disabled=""></td>
                                <td class="center"><input type="text" name="cb2_tep_text" style="width: 100%;" disabled=""></td>
                                <td class="center"></td>
                            </tr>
    </tbody>
    </table>

我只想在选中复选框时启用前两个选项，并在取消选中复选框时禁用。

Answer 1

jQuery中没有.onclick()事件绑定 - 它是.click()，启用和禁用元素的属性名称是disabled而不是disable。您还需要将绑定包装在$(document).ready()块中，以便Javascript不会尝试将事件绑定到尚不存在的元素。

对代码进行的这些更改都是使其工作所需的全部内容。

$(document).ready()
{
    $('td input[type="checkbox"]').click(function () {
        $(this).closest('tr').find('input[type="text"]').prop('disabled', !this.checked);
    }).change();
});

以下是显示更改的working jsFiddle。

使用表格内的复选框启用/禁用文本框

1 个答案: