javascript - 当复选框签入时禁用文本框

Question

   <table width="100%" cellspacing="2" cellpadding="0" class="data-entry">
 <tbody>
 <tr>
 <th>
 <span name="obj1">
 <input type="checkbox"  checked="checked" 
 id="chkOrg1">
<label for="chkOrg1">Ori 1:</label>
</span>
</th>
<td>
 1.   <input type="text" style="width:40px;" 
id="txtOrg1">
</td>
<th>
    <span id="lblDest1">Des 1:</span>
</th>
<td>
 2.     <input type="text" style="width:40px;" id="txtDest1" >
</td>
<th id="thCar1">
Car 1
</th>
<td >     
3. <input type="text" style="width:25px;" id="txtCar1" >
</td>
 --------------------------------------------------------------------------------------
<th>
       <span name="obj2"><input type="checkbox" 
checked="checked"  id="chkOrg2">
<label for="chkOrg2">Ori 2:</label></span>
    </th>
<td>
1. <input type="text" style="width:40px;" id="txtOrg2" >
</td>
<th>
    <span id="lblDest2">Dest 2:</span>
</th>
<td>
2. <input type="text" style="width:40px;" id="txtDest2" >
</td>
<th id="thCar2">
    Carr 2
</th>
<td id="tdCar2">
 3.  <input type="text" style="width:25px;" id="txtCar2" >
</td>
 </tr>
<tr>
 ..
 </tr>
<tr>
..

...

在上面的表格中包含复选框和文本框。当禁用上面的第一个文本框（1,2,3）时选中复选框，所以如何禁用文本框请帮助我如何禁用文本框请帮助我。

Answer 1

尝试

jQuery(function () {
    $('.data-entry input:checkbox').click(function () {
        $(this).closest('td,th').nextAll().slice(0, 5).find('input').prop('disabled', !this.checked)
    })
})

演示：小提琴

Answer 2

这是您更新的代码。只需将其放在您的文件中并检查即可。

<script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script>
<table width="100%" cellspacing="2" cellpadding="0" class="data-entry">
    <tbody>
        <tr>
            <th>
                <span name="obj1">
                    <input type="checkbox"  checked="checked" id="chkOrg1" value="firstcheckbox" class="check_checkbox" onclick="check_status()">
                    <label for="chkOrg1">Ori 1:</label>
                </span>
            </th>
            <td>
                1.   <input class="firstcheckbox" type="text" style="width:40px;" 
                            id="txtOrg1">
            </td>
            <th>
                <span id="lblDest1">Des 1:</span>
            </th>
            <td>
                2.     <input class="firstcheckbox" type="text" style="width:40px;" id="txtDest1" >
            </td>
            <th id="thCar1">
                Car 1
            </th>
            <td >     
                3. <input class="firstcheckbox" type="text" style="width:25px;" id="txtCar1" >
            </td>
            --------------------------------------------------------------------------------------
            <th>
                <span name="obj2"><input type="checkbox" checked="checked"  id="chkOrg2" value="secondcheckbox" class="check_checkbox" onclick="check_status()">
                    <label for="chkOrg2">Ori 2:</label></span>
            </th>
            <td>
                1. <input class="secondcheckbox" type="text" style="width:40px;" id="txtOrg2" >
            </td>
            <th>
                <span id="lblDest2">Dest 2:</span>
            </th>
            <td>
                2. <input class="secondcheckbox" type="text" style="width:40px;" id="txtDest2" >
            </td>
            <th id="thCar2">
                Carr 2
            </th>
            <td id="tdCar2">
                3.  <input class="secondcheckbox" type="text" style="width:25px;" id="txtCar2" >
            </td>
        </tr>
        <tr>
            ..
        </tr>
        <tr>

    <script>
        $(document).ready(function() {
            $('input:checkbox.check_checkbox').each(function() { 
                var sThisVal = (this.checked ? $(this).val() : "");
                if(sThisVal != ''){
                    $("."+sThisVal).attr('disabled','disabled');
                }

            });
        });

        function check_status(){
            if($('#chkOrg1').is(":checked")){
                $("."+$('#chkOrg1').val()).attr('disabled','disabled');
            }else{
                $("."+$('#chkOrg1').val()).removeAttr('disabled');
            }

            if($('#chkOrg2').is(":checked")){
                $("."+$('#chkOrg2').val()).attr('disabled','disabled');
            }else{
                $("."+$('#chkOrg2').val()).removeAttr('disabled');
            }
        }
    </script>

希望这是你需要的。