如何将指定select标签代码转换为动态radio按钮？

原代码是一个Approval Status的下拉选择框，包含Shipable（值4）和Suggestion（值1）两个选项，需要替换为单选按钮，同时解决控件重叠和动态选中的问题。以下是修改后的代码：

<div class="form-group m-form__group row col-12">
    <label for="example-text-input" class="col-3 col-form-label">Approval Status</label>
    <div class="col-9">
        <!-- 单选按钮组，用form-check确保布局不重叠 -->
        <div class="form-check">
            <input type="radio" class="form-check-input" name="approvalstatus" id="shipable" value="4" 
                   @((int)Model.PARAMETER.APPROVALSTATUS == 4 ? "checked" : "") required>
            <label class="form-check-label" for="shipable">Shipable</label>
        </div>
        <div class="form-check">
            <input type="radio" class="form-check-input" name="approvalstatus" id="suggestion" value="1" 
                   @((int)Model.PARAMETER.APPROVALSTATUS == 1 ? "checked" : "")>
            <label class="form-check-label" for="suggestion">Suggestion</label>
        </div>
    </div>
</div>

关键改动说明： #

• 布局修复：每个单选按钮用.form-check容器包裹，配合.form-check-input和.form-check-label类，确保控件和文本不会重叠，符合m-form的样式规范
• 动态选中：通过Razor三元表达式直接判断Model.PARAMETER.APPROVALSTATUS的值，动态添加checked属性，简化原有的重复代码逻辑
• 单选组规则：两个单选按钮保持相同的name="approvalstatus"，确保同一时间只能选中一个选项
• 必填验证：在第一个单选按钮上添加required属性，确保提交表单时必须选择一个状态

内容的提问来源于stack exchange，提问作者ismail temel