A challenge I am facing involves creating a form with multiple select options that need to be ranked by the user from 1-8. However, I am encountering some difficulties in hiding, removing, or disabling certain select options.
Below is an excerpt from my form: These are just the initial four out of the total 8 selects that need to be ranked
<label>Spirituality</label>\
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>School</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>Family</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>Friends</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
This snippet shows the progress I've made with my script so far:
$(document).ready(function () {
$("#ranks1").click(function () {
$('#ranks1 option').prop('disabled', true);
});
});
I have also added CSS styles specifically for disabled options:
select option[disabled] {
display: none !important;
}
For more context on how the form appears, you can view it here.