Как отобразить отмеченный переключатель на модальном?

#javascript #html #ajax #laravel

#javascript #HTML #ajax #laravel

Вопрос:

У меня есть этот режим редактирования, который, когда я его загружаю, загружает все остальные поля, кроме переключателя. Я попытался загрузить его с помощью двух команд, перечисленных ниже, но безуспешно. Есть ли что-то, чего мне не хватает, чтобы это работало?

 <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");
  

Комментарии:

1. вы хотите <input class="w3-radio" type="radio" name="event_category" id="event-category" value="C"> , чтобы его проверяли при загрузке

Ответ №1:

Для каждого элемента ввода необходим уникальный идентификатор. (Никакие идентификаторы не должны повторяться ни в одном документе HTML).

 <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>
  

Необходимый переключатель может быть запрошен по идентификатору и установлен в значение checked.

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

Например, если у вас есть значение в event_category переменной, вы можете добавить его к селектору:

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

Комментарии:

1. Я следовал вашим рекомендациям, и это сработало для меня, спасибо! Я думаю, что мое замешательство возникло из-за того, что я подумал, что, поскольку это группа переключателей, они должны иметь одинаковые идентификаторы. Спасибо, что разъяснили это для меня.