jquery를 사용하여 테이블의 클릭 한 행 이외의 행 및 열 확인란을 비활성화하는 방법

Question

다음 코드로 시도했습니다. 행의 확인란을 비활성화했습니다. 이제 각 열을 비활성화하는 데 문제가 있습니다.

내 HTML 및 JS 코드는 아래 스 니펫에서 찾으십시오.

코드

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<table class="reg_table"> 
 
\t \t <tr> 
 
\t \t \t <th></th> 
 
\t \t \t <th>8-9</th> 
 
\t \t \t <th>9-10</th> 
 
\t \t \t <th>10-11</th> 
 
\t \t \t <th>11-12</th> 
 
\t \t \t <th>12-13</th> 
 
\t \t \t <th>13-14</th> 
 
\t \t \t <th>14-15</th> 
 
\t \t \t <th>15-16</th> 
 
\t \t \t 
 
\t \t \t 
 
\t \t </tr> 
 

 
\t \t \t \t \t 
 
\t \t <tr> 
 
\t \t \t <td>Company name 1</td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~8-9" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~9-10" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~10-11" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~11-12" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~12-13" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~13-14" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~14-15" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~15-16" /></td> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t </tr> 
 
\t \t 
 
\t \t \t \t 
 
\t \t <tr> 
 
\t \t \t <td>Company name 2</td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~8-9" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~9-10" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~10-11" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~11-12" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~12-13" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~13-14" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~14-15" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~15-16" /></td> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t </tr> 
 
\t \t 
 
\t \t \t \t 
 
\t \t <tr> 
 
\t \t \t <td>Company name 3</td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~8-9" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~9-10" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~10-11" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~11-12" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~12-13" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~13-14" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~14-15" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~15-16" /></td> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t </tr> 
 
\t \t 
 
\t \t \t \t 
 
\t \t <tr> 
 
\t \t \t <td>Company name 4</td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~8-9" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~9-10" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~10-11" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~11-12" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~12-13" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~13-14" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~14-15" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~15-16" /></td> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t </tr> 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t </table>

참고 니펫을 : 나는 당신이 클릭 할 것 셀의 열 인덱스를 얻을 수 .index()을 사용할 수 있습니다

Answer 1

<script src="jquery-1.7.1.min.js"></script>을 사용하고

.

인수가 .index() 메소드에서 반환 값은 형제 요소를 기준으로 jQuery 객체 내의 첫 번째 요소의 위치를 ​​나타내는 정수입니다.

작업 바이올린 :

그런 다음 해당 열의 모든 셀 찾을 :nth-child을 사용할 수 있습니다

$('input[type=checkbox]').click(function(){ 
     var td = $(this).closest('td'); 
     var tr = $(this).closest('tr'); 
     var tbl = $(this).closest('table') 

     var idx = td.index(); 

     tbl 
      .find("tr td:nth-child(" + (idx+1) + ")") 
      .find("input") 
      .not(this) 
      .prop('disabled', this.checked); 

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

https://jsfiddle.net/k8u35ysz/는 (문제의 코드가 radio를 사용하지만,을 선택 취소 할 수있는 옵션이 필수이므로 변경 체크 박스로)

Answer 2

$('input[type=checkbox]').click(function() { 
    //This will disable all the checkboxes in a table. 
    $('.reg_table input[type=checkbox]').attr('disabled', true); 

    //This will enable the selected checkbox and set it to selected. 
    $(this).attr('disabled', false); 
    this.checked = true; 
}); 

Answer 3

다음과 같이 할 수 있습니다 :

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


    // Below is the added code 
    var tdIndex = $(this).closest('td').index() + 1; 
    $('table').find("tr td:nth-of-type(" + tdIndex + ")") 
    .find('input[type=checkbox]').not(this) 
    .attr('disabled', this.checked); 

}); 

예상대로 작동하며 예상대로 작동합니다. 바이올린에 업데이트됩니다.

UPDATE : 여기에 열의 바이올린 https://jsfiddle.net/sq3vrxy1/

Answer 4

, 당신은 열 인덱스를 취득해야합니다.

그래서 ...이로 그

var cell = $(this).closest('td'); 
var index = $(this).closest('tr'); 
var table = $(this).closest('table'); 
$(table).find('tr td:nth-child(' + index + ') input[type=checkbox]').not(this).prop('disabled', this.checked);