How can I convert the code in the following select tags into a radio button?-CodePudding

<div >
<label for="example-text-input" >Approval Status</label>
<div >
    <select  name="approvalstatus" required>
        @if ((int)Model.PARAMETER.APPROVALSTATUS == 4)
        {
            <option selected value="4">Shipable</option>
        }
        else
        {
            <option value="4">Shipable</option>
        }
        @if ((int)Model.PARAMETER.APPROVALSTATUS == 1)
        {
            <option selected value="1">Suggestion</option>
        }
        else
        {
            <option value="1">Suggestion</option>
        }
    </select>
</div>

There are two options in the above code, I want to show these two options with radio button, not with select. In my own experiments, the changes I made always overlapped and I could not make it dynamic. Thanks for your help.

CodePudding user response：

I think this is what you are expecting,

<div >
<label for="example-text-input" >Approval Status</label>
<div >
    <label >
        <input type="radio" name="approvalstatus" value="4" 
            @if ((int)Model.PARAMETER.APPROVALSTATUS == 4)
            {
                checked
            }
        > Shipable
    </label>
    <label >
        <input type="radio" name="approvalstatus" value="1" 
            @if ((int)Model.PARAMETER.APPROVALSTATUS == 1)
            {
                checked
            }
        > Suggestion
    </label>
</div>

updated: as Hans suggest you do it as,

<input type="radio" name="approvalstatus" value="4" checked=@((int)Model.PARAMETER.APPROVALSTATUS == 4) required> Shipable

CodePudding user response：

Since you used bootstrap to implement a select tag in the code see the following example of classes of bootstrap used for a select tag:

<div >
  <label for="sel1">Select list:</label>
  <select  id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Replace class names and Option tags with Label/input tags:

<div >
  <label >
    <input type="radio"  name="optradio">Option 1
  </label>
</div>
<div >
  <label >
    <input type="radio"  name="optradio">Option 2
  </label>
</div>
<div >
  <label >
    <input type="radio"  name="optradio" disabled>Option 3
  </label>
</div>