0

I am struggling with trying to figure out a way to make a particular option compulsory. I need the user to select it with no option of anything else, while also making sure that if they have already selected a particular option it is disabled. Is there perhaps a way to do this? I have done some research on the matter but I keep coming on short of answers. They all involve jquery and libraries which I have never used before. Below is the code used for the selection.

 <!-- High Quality Protein Sources: -->
        <label class="select" for="High Quality Protein Sources:">High Quality Protein Sources:
            <br>(Make sure Animal Protein sourses are allowed in your country)
        </label>
        <select required="true">
            <option value=""> Please Select 1</option>
            <option value="1" required="true">Soybean Meal (47% CP) (Compulsory)</option>
            <option value="2">Soybean Full-Fat (heat treated)</option>
            <option value="3">Peanut Meal (>5% oil)</option>
            <option value="4">Peas (Field Peas)</option>
            <option value="5">Fish Meal (60 - 68% CP)</option>
            <option value="6">Blood Meal</option>
            <option value="7">Black Soldier Fly Lar</option>
            <option value="8">Bakery Waste (eg Bread)</option>
            <option value="9">Meat & Bone Meal (High Fat)</option>
        </select>
        <select required>
            <option value=""> Please Select 1</option>
            <option value="1">Soybean Meal (47% CP) (Compulsory)</option>
            <option value="2">Soybean Full-Fat (heat treated)</option>
            <option value="3">Peanut Meal (>5% oil)</option>
            <option value="4">Peas (Field Peas)</option>
            <option value="5">Fish Meal (60 - 68% CP)</option>
            <option value="6">Blood Meal</option>
            <option value="7">Black Soldier Fly Lar</option>
            <option value="8">Bakery Waste (eg Bread)</option>
            <option value="9">Meat & Bone Meal (High Fat)</option>
        </select>

Someone suggested that I make the compulsory options in their own selects where they are the only option it is working as intended so thank you – OMi Shah and everyone else who left advice

Cassandra.M
  • 5
  • 4
  • 2
    How can it be compulsory if it's an option? it would mean you couldn't select anything else – Pete Oct 11 '22 at 14:49
  • 3
    I would posit that if you have **only one choice**, ``. What's the point of even having other ` – esqew Oct 11 '22 at 14:49
  • I mean for the user to be able to choose more than one. So like you have x which must be chosen but for the next 2 sections, you can choose anything. – Cassandra.M Oct 11 '22 at 14:52
  • Move the ```` to a different ``select`` tag with single option and it will be required. – OMi Shah Oct 11 '22 at 14:54
  • 1
    Probably want to use checkboxes and disable the one they cannot unselect (as well as posting it using a hidden input as disabled checkbox values are not sent with the form) – Pete Oct 11 '22 at 14:57
  • Your choice indicates that your interface design is sub-optimal. Still, if you really want to experiment with this, it can only be done with code, like in [this answer](https://stackoverflow.com/a/1537865/16466946). And the `select` needs to have `multiple` attribute – kikon Oct 11 '22 at 14:58
  • If it's compulsory just show it as plain text on the form separately above, since they can't change it there's no point even putting it in the select. And make sure your server knows it always has to add that one in when the form is submitted. Don't put it on the client side where the user could (if they know what they're doing) mess with it. – ADyson Oct 11 '22 at 14:58
  • A select with only one option is a UX antipattern – ADyson Oct 11 '22 at 15:13
  • Changed it to a checkbox – Cassandra.M Oct 13 '22 at 10:43

0 Answers0