I have the form with 4 rows and each row has 10 cells. Each cell has 2 check boxes. If one check box is checked i would like do disable the other check box and other way around. Here is example of what I have:
table.myTbl {
width: 100%;
}
table.myTbl td {
text-align: center;
padding: 1px;
margin: 0px;
background-color: #ccc;
}
<table class="mtTbl">
<tr>
<td>
<input type="checkbox" name="frmra0m" id="frmra0m" /><b>M</b>
<input type="checkbox" name="frmra0nr" id="frmra0nr" /><b>NR</b><br>
<input type="number" name="frmra0" id="frmra0" min="0" max="120" step="5" style="width:50px" />
</td>
<td>
<input type="checkbox" name="frmra1m" id="frmra1m" /><b>M</b>
<input type="checkbox" name="frmra1nr" id="frmra1nr" /><b>NR</b><br>
<input type="number" name="frmra1" id="frmra1" min="0" max="120" step="5" style="width:50px" />
</td>
<td>
<input type="checkbox" name="frmra2m" id="frmra2m" /><b>M</b>
<input type="checkbox" name="frmra2nr" id="frmra2nr" /><b>NR</b><br>
<input type="number" name="frmra2" id="frmra2" min="0" max="120" step="5" style="width:50px" />
</td>
<td>
<input type="checkbox" name="frmra3m" id="frmra3m" /><b>M</b>
<input type="checkbox" name="frmra3nr" id="frmra3nr" /><b>NR</b><br>
<input type="number" name="frmra3" id="frmra3" min="0" max="120" step="5" style="width:50px" />
</td>
<td>
<input type="checkbox" name="frmra4m" id="frmra4m" /><b>M</b>
<input type="checkbox" name="frmra4nr" id="frmra4nr" /><b>NR</b><br>
<input type="number" name="frmra4" id="frmra4" min="0" max="120" step="5" style="width:50px" />
</td>
<td>
<input type="checkbox" name="frmra5m" id="frmra5m" /><b>M</b>
<input type="checkbox" name="frmra5nr" id="frmra5nr" /><b>NR</b><br>
<input type="number" name="frmra5" id="frmra5" min="0" max="120" step="5" style="width:50px" />
</td>
<td>
<input type="checkbox" name="frmra6m" id="frmra6m" /><b>M</b>
<input type="checkbox" name="frmra6nr" id="frmra6nr" /><b>NR</b><br>
<input type="number" name="frmra6" id="frmra6" min="0" max="120" step="5" style="width:50px" />
</td>
<td>
<input type="checkbox" name="frmra7m" id="frmra7m" /><b>M</b>
<input type="checkbox" name="frmra7nr" id="frmra7nr" /><b>NR</b><br>
<input type="number" name="frmra7" id="frmra7" min="0" max="120" step="5" style="width:50px" />
</td>
<td>
<input type="checkbox" name="frmra8m" id="frmra8m" /><b>M</b>
<input type="checkbox" name="frmra8nr" id="frmra8nr" /><b>NR</b><br>
<input type="number" name="frmra8" id="frmra8" min="0" max="120" step="5" style="width:50px" />
</td>
<td>
<input type="checkbox" name="frmra9m" id="frmra9m" /><b>M</b>
<input type="checkbox" name="frmra9nr" id="frmra9nr" /><b>NR</b><br>
<input type="number" name="frmra9" id="frmra9" min="0" max="120" step="5" style="width:50px" />
</td>
<td>
<input type="checkbox" name="frmra10m" id="frmra10m" /><b>M</b>
<input type="checkbox" name="frmra10nr" id="frmra10nr" /><b>NR</b><br>
<input type="number" name="frmra10" id="frmra10" min="0" max="120" step="5" style="width:50px" />
</td>
</tr>
</table>
I was thinking about radio buttons but there is a problem. Radio button can't be unchecked. If anyone can provide any advise or solution for this problem please let me know. Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire