I'm building a web form and I currently have five 'drop-down' menus (using the select tag) that allow users to choose a value from 0-5. It looks like this:
Choose one:
<select name="choose_one" required>
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Is there anything I can do to disable a certain number from being chosen again if it is chosen on a select menu in other menus? Meaning, if I select 1 on the first drop-down menu I come across, I wouldn't be able to select it again on the others.
A potential solution I was considering was making a table of radio buttons. When a user selects a number, it disables that whole row of numbers. However I'm not really sure if I could do this in HTML. I think I'd need to use JS/JQuery.
One of the issues here is that 0 should be able to be selected multiple times, but a column needs to be disabled after a value for that column has been selected. The 0 field could be checkboxes, but then the style wouldn't be the same as the radio buttons.
Use same name for radio buttons in one cloumn.
For example
<table>
<tr>
<td></td>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>0</td>
<td><input type="radio" name="item1" value="0" /></td>
<td><input type="radio" name="item2" value="0" /></td>
<td><input type="radio" name="item3" value="0" /></td>
</tr>
<tr>
<td>1</td>
<td><input type="radio" name="item1" value="1" /></td>
<td><input type="radio" name="item2" value="1" /></td>
<td><input type="radio" name="item3" value="1" /></td>
</tr>
<tr>
<td>2</td>
<td><input type="radio" name="item1" value="2" /></td>
<td><input type="radio" name="item2" value="2" /></td>
<td><input type="radio" name="item3" value="2" /></td>
</tr>
</table>
$("input[type=radio]").click(function() {
var selectedValue = $(this).val() ;
$("input[value="+selectedValue+"]").each(function(){
if(!$(this).is(':checked')) {
$(this).prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>0</td>
<td><input type="radio" name="item1" value="0" /></td>
<td><input type="radio" name="item2" value="0" /></td>
<td><input type="radio" name="item3" value="0" /></td>
</tr>
<tr>
<td>1</td>
<td><input type="radio" name="item1" value="1" /></td>
<td><input type="radio" name="item2" value="1" /></td>
<td><input type="radio" name="item3" value="1" /></td>
</tr>
<tr>
<td>2</td>
<td><input type="radio" name="item1" value="2" /></td>
<td><input type="radio" name="item2" value="2" /></td>
<td><input type="radio" name="item3" value="2" /></td>
</tr>
</table>
</div>
Similar to what @Bilal proposed. I added a data-col attribute for each column as well and I use this to disable the other radio buttons in the same column. There is probably a better way to do this but this is off the top of my head. HTML
<table>
<tr>
<td></td>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>0</td>
<td><input data-col="1" type="radio" name="item1" value="0" /></td>
<td><input data-col="2" type="radio" name="item2" value="0" /></td>
<td><input data-col="3" type="radio" name="item3" value="0" /></td>
</tr>
<tr>
<td>1</td>
<td><input data-col="1" type="radio" name="item1" value="1" /></td>
<td><input data-col="2" type="radio" name="item2" value="1" /></td>
<td><input data-col="3" type="radio" name="item3" value="1" /></td>
</tr>
<tr>
<td>2</td>
<td><input data-col="1" type="radio" name="item1" value="2" /></td>
<td><input data-col="2" type="radio" name="item2" value="2" /></td>
<td><input data-col="3" type="radio" name="item3" value="2" /></td>
</tr>
</table>
JavaScript
var all = $('input[type="radio"]');
all.on('change' function(){
var col =$(this).attr('data-col');
$('[data-col="'+col+'"]').prop('disabled', true);
$(this).prop('disabled',false);
});