使用表格內的復選框啟用/禁用文本框

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

沒有.onclick()事件中jQuery的結合-這是.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();
});

這是一個工作的jsFiddle，顯示了這些更改。