如何在 Modal 上显示选中的单选按钮？

Question

我有这个编辑模式，当我加载它时，它会加载所有其他字段，除了单选按钮之一。 我尝试使用下面列出的两个命令加载它，但没有运气。 有什么我缺少的东西让它工作吗？

<div class="text-center">
                                <div class="w3-row">
                                    <label for="event_category">Event Category:</label>
                                    <input class="w3-radio" type="radio" name="event_category" id="event-category" value="C">
                                    <label>Competition</label>    
                                    <input class="w3-radio" type="radio" name="event_category"  id="event-category" value="F">
                                    <label>Fundraiser</label>    
                                    <br>
                                    <input class="w3-radio" type="radio"  name="event_category" id="event-category" value="P">
                                    <label>Practice</label>
                                    <input class="w3-radio" type="radio"  name="event_category" id="event-category" value="O">
                                    <label>Other</label>
                                </div>
                            </div>

$('#event_category').prop('checked',event.event_category);

$('#event_category').val("input[name='radio']:checked");

Answer 1

每个输入元素都需要唯一的 ID。 （在任何 HTML 文档中都不应重复 ID）。

<div class="text-center">
    <div class="w3-row">
        <label for="event_category">Event Category:</label>
        <input class="w3-radio" type="radio" name="event_category" id="event-category-C" value="C">
        <label>Competition</label>    
        <input class="w3-radio" type="radio" name="event_category"  id="event-category-F" value="F">
        <label>Fundraiser</label>    
        <br>
        <input class="w3-radio" type="radio"  name="event_category" id="event-category-P" value="P">
        <label>Practice</label>
        <input class="w3-radio" type="radio"  name="event_category" id="event-category-O" value="O">
        <label>Other</label>
    </div>
</div>

需要的单选按钮可以通过ID查询并设置为选中。

$("#event-category-P").prop("checked", true);

例如，如果您在 event_category 变量中有值，则可以将其附加到选择器：

let event_category = 'P';
$("#event-category-" + event_category).prop("checked", true);