CODEWITHSUNDEEP
javascriptjquerycheckboxdisabled-input
Vetrivel
Vetrivel

Reputation: 1149

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 disabling the checkboxes in the row. Now I have a problem disabling the respective column.

Find my HTML and JS code in the snippet below.

Code snippet

$('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">
		<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="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~8-9" /></td>
			<td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~9-10" /></td>
			<td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~10-11" /></td>
			<td><input type="checkbox"  alt="1" class="sss" name="Company name 1" value="Company name 1~11-12" /></td>
			<td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~12-13" /></td>
			<td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~13-14" /></td>
			<td><input type="checkbox"  alt="1" class="sss" name="Company name 1" value="Company name 1~14-15" /></td>
			<td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~15-16" /></td>
			
			
			
		</tr>
		
				
		<tr>
			<td>Company name 2</td>
			<td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~8-9" /></td>
			<td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~9-10" /></td>
			<td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~10-11" /></td>
			<td><input type="checkbox"  alt="2" class="sss" name="Company name 2" value="Company name 2~11-12" /></td>
			<td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~12-13" /></td>
			<td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~13-14" /></td>
			<td><input type="checkbox"  alt="2" class="sss" name="Company name 2" value="Company name 2~14-15" /></td>
			<td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~15-16" /></td>
			
			
			
		</tr>
		
				
		<tr>
			<td>Company name 3</td>
			<td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~8-9" /></td>
			<td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~9-10" /></td>
			<td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~10-11" /></td>
			<td><input type="checkbox"  alt="3" class="sss" name="Company name 3" value="Company name 3~11-12" /></td>
			<td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~12-13" /></td>
			<td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~13-14" /></td>
			<td><input type="checkbox"  alt="3" class="sss" name="Company name 3" value="Company name 3~14-15" /></td>
			<td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~15-16" /></td>
			
			
			
		</tr>
		
				
		<tr>
			<td>Company name 4</td>
			<td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~8-9" /></td>
			<td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~9-10" /></td>
			<td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~10-11" /></td>
			<td><input type="checkbox"  alt="4" class="sss" name="Company name 4" value="Company name 4~11-12" /></td>
			<td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~12-13" /></td>
			<td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~13-14" /></td>
			<td><input type="checkbox"  alt="4" class="sss" name="Company name 4" value="Company name 4~14-15" /></td>
			<td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~15-16" /></td>
			
			
			
		</tr>
		
		
		
	</table>

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

Upvotes: 0

Views: 2309

Answers (4)

Nomenator
Nomenator

Reputation: 1127

For columns, you’ll need to get the column index.

So… something like that

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);

Upvotes: 0

Rieljun Liguid
Rieljun Liguid

Reputation: 1531

You can do it like this:

$('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);

});

Tested locally and works as expected. Will update for the fiddle.

UPDATE: here is the fiddle https://jsfiddle.net/sq3vrxy1/

Upvotes: 2

Ajit Kumar Singh
Ajit Kumar Singh

Reputation: 357

$('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;
});

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

You can use .index() to get the column index of the cell that's clicked in.

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

Then you can use :nth-child to find all the cells in that column:

Working fiddle: https://jsfiddle.net/k8u35ysz/

$('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);

(the question's code used radio but required an option to untick, so changed to checkbox)

Upvotes: 0

Related Questions