mardi 2 août 2016

How to disable row as well as column checkboxes except the clicked one in the table using jquery

I have tried with the following code. I have done upto disabling the row. Now i have the problem with disabling the respective column.

HTML CODE

<table class="reg_table">
        <tr>
            <th></th>
            <th>8-9</th>
            <th>9-10</th>
            <th>10-11</th>
            <th>11-12</th>
            <th>12-13</th>
            <th>13-14</th>
            <th>14-15</th>
            <th>15-16</th>


        </tr>


        <tr>
            <td>Company name 1</td>
            <td><input type="radio" class="sss" name="Company name 1" value="Company name 1~8-9" /></td>
            <td><input type="radio" name="Company name 1" value="Company name 1~9-10" /></td>
            <td><input type="radio" name="Company name 1" value="Company name 1~10-11" /></td>
            <td><input type="radio" name="Company name 1" value="Company name 1~11-12" /></td>
            <td><input type="radio" name="Company name 1" value="Company name 1~12-13" /></td>
            <td><input type="radio" name="Company name 1" value="Company name 1~13-14" /></td>
            <td><input type="radio" name="Company name 1" value="Company name 1~14-15" /></td>
            <td><input type="radio" name="Company name 1" value="Company name 1~15-16" /></td>



        </tr>


        <tr>
            <td>Company name 2</td>
            <td><input type="radio" class="sss" name="Company name 2" value="Company name 2~8-9" /></td>
            <td><input type="radio" name="Company name 2" value="Company name 2~9-10" /></td>
            <td><input type="radio" name="Company name 2" value="Company name 2~10-11" /></td>
            <td><input type="radio" name="Company name 2" value="Company name 2~11-12" /></td>
            <td><input type="radio" name="Company name 2" value="Company name 2~12-13" /></td>
            <td><input type="radio" name="Company name 2" value="Company name 2~13-14" /></td>
            <td><input type="radio" name="Company name 2" value="Company name 2~14-15" /></td>
            <td><input type="radio" name="Company name 2" value="Company name 2~15-16" /></td>



        </tr>


        <tr>
            <td>Company name 3</td>
            <td><input type="radio" class="sss" name="Company name 3" value="Company name 3~8-9" /></td>
            <td><input type="radio" name="Company name 3" value="Company name 3~9-10" /></td>
            <td><input type="radio" name="Company name 3" value="Company name 3~10-11" /></td>
            <td><input type="radio" name="Company name 3" value="Company name 3~11-12" /></td>
            <td><input type="radio" name="Company name 3" value="Company name 3~12-13" /></td>
            <td><input type="radio" name="Company name 3" value="Company name 3~13-14" /></td>
            <td><input type="radio" name="Company name 3" value="Company name 3~14-15" /></td>
            <td><input type="radio" name="Company name 3" value="Company name 3~15-16" /></td>



        </tr>


        <tr>
            <td>Company name 4</td>
            <td><input type="radio" class="sss" name="Company name 4" value="Company name 4~8-9" /></td>
            <td><input type="radio" name="Company name 4" value="Company name 4~9-10" /></td>
            <td><input type="radio" name="Company name 4" value="Company name 4~10-11" /></td>
            <td><input type="radio" name="Company name 4" value="Company name 4~11-12" /></td>
            <td><input type="radio" name="Company name 4" value="Company name 4~12-13" /></td>
            <td><input type="radio" name="Company name 4" value="Company name 4~13-14" /></td>
            <td><input type="radio" name="Company name 4" value="Company name 4~14-15" /></td>
            <td><input type="radio" name="Company name 4" value="Company name 4~15-16" /></td>



        </tr>



    </table>

Find my jQuery code:

$('input[type=checkbox]').click(function(){



        $(this).closest('tr')
        .find('input[type=checkbox]').not(this)
        .prop('disabled', this.checked);


}); 

enter image description here

Note: I am using <script src="jquery-1.7.1.min.js"></script>




Aucun commentaire:

Enregistrer un commentaire