Seleccione solo una checkbox / botón de radio en la misma fila y columna

Tengo seis columnas con seis casillas de verificación (o radio). Mi intención es que solo se pueda seleccionar una checkbox en la misma fila y la misma columna. Por ejemplo: cuando selecciono la checkbox en column4 y row3 ‘, cada checkbox en row3 y column4 debe deseleccionarse inmediatamente.

Lo intenté con los botones de radio, pero simplemente no puedo hacerlo, porque cada radio siempre está en dos grupos diferentes.

Editar: Mi código HTML:

column1row1
column1row2
column1row3
column1row4
column1row5
column1row6
column2row1
column2row2
column2row3
column2row4
column2row5
column2row6
column3row1
column3row2
column3row3
column3row4
column3row5
column3row6
column4row1
column4row2
column4row3
column4row4
column4row5
column4row6
column5row1
column5row2
column5row3
column5row4
column5row5
column5row6
column6row1
column6row2
column6row3
column6row4
column6row5
column6row6

Depende del marcado. Aquí hay un ejemplo simple:

html

 

jquery

 $('input[type="checkbox"]').on('change', function() { // uncheck sibling checkboxes (checkboxes on the same row) $(this).siblings().prop('checked', false); // uncheck checkboxes in the same column $('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false); }); 

Aquí hay un violín

Aquí hay otro ejemplo usando clases

No estoy seguro de si esta es la mejor solución posible, pero creo que hace lo que usted quiere.

 $(":radio").change(function() { // find column var tdColumn = $(this).closest("td"); // find row var trRow = tdColumn.closest("tr"); // uncheck all radios in current row, except the selected radio trRow.find(":radio").not($(this)).prop("checked",false); // index of current column var i = tdColumn.index(); // uncheck all radios in current column, except the selected radio trRow.siblings("tr").each(function(key, value) { $(value).find(":radio")[i].checked = false; } ); }); 
  

Lo creé en 3 columnas y 5 filas, PERO funciona para N columnas y M filas … solo aumenta las tags td y tr …

Prueba esto…

También puedes probarlo en vivo aquí 😉

Resultado

………………………………………….. ……………….. introduzca la descripción de la imagen aquí ………………………………………….. ………….

jQuery:

 $(document).ready(function(){ var $table = $('#MyTable'); var $rowCount = $table.find('tr').length; var $colCount = $($table.find('tr')[0]).find('td').length; console.log($rowCount); console.log($colCount); $table.find('tr').each(function(i, e){ $tr=$(e); console.log($tr); }); }); $(".chBox").click(function() { console.log('clicked'); $this=$(this); $row=$this.parent().parent(); $table=$this.closest('table'); $row.find('.chBox').each(function(i, e){ $checkbox=$(e); $checkbox.prop('checked',false); console.log($checkbox); }); $this.prop('checked',true); var col = $this.parent().parent().children().index($this.parent()); var row = $this.parent().parent().parent().children().index($this.parent().parent()); console.log(col); console.log(row); $table.find('tr').each(function(i, e){ $tr=$(e); $tr.find('.chBox').each(function(k,ex){ $chBox=$(this); if(k==col && i!=row) $chBox.prop('checked',false); }); }); }); 

HTML: