0

Использую bootstrap 4.

Есть данные, которые грузятся с сервера.

Есть два radio:

<div class="form-group row">
  <div class="row col-6 justify-content-center">
    <label class="custom-control custom-radio" style="margin: 0">
      <input id="edit-user-male-1" name="gender" type="radio" value="male" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Мужской</span>
    </label>
  </div>
  <div class="row col-6 justify-content-center">
    <label class="custom-control custom-radio"  style="margin: 0">
      <input id="edit-user-female-2" name="gender" type="radio" value="female" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Женский</span>
    </label>
  </div>
</div>

При получении данных я сделаю либо первому или второму checked:

editModal.find('input.custom-control-input[name="gender"][value="'+user.genderTitle+'"]').prop('checked', true);

Но при этом визуально оно не видно. В чем проблема?

4
  • или editModal не то, что Вы думаете, или user.genderTitle не male/female
    – user176262
    15 сен 2017 в 12:45
  • editModal это модальное окно. Помимо этого я выставляю ещё кучу данных и все вставляется нормально. проверял user.genderTitle выводил в консоль что находит jQ - все верно.
    – Tsyklop
    15 сен 2017 в 12:47
  • console.log(editModal.find('input.custom-control-input[name="gender"][value="'+user.genderTitle+'"]').length); - что выводит?
    – user176262
    15 сен 2017 в 12:48
  • @Igor находит именно те радио которые нужны.
    – Tsyklop
    15 сен 2017 в 12:49

1 ответ 1

1

Вот пример, при нажатии на кнопку выбирается соответствующее значение и все прекрасно видно визуально. Смотрите что у вас может быть реализовано по-другому.

$(document).on('click', '.button', function(){
	var value = $(this).data('gender');
  $('.element').find('[name="gender"][value="'+value+'"]').prop('checked', true);
});
.element{
  margin-left:20px;
}

.separator{
  margin-top:20px;
}

.button{
  padding:20px;
  border:1px solid black;
  cursor: pointer;  
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row element">
  <div class="row col-6 justify-content-center">
    <label class="custom-control custom-radio" style="margin: 0">
      <input id="edit-user-male-1" name="gender" type="radio" value="male" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Мужской</span>
    </label>
  </div>
  <div class="row col-6 justify-content-center">
    <label class="custom-control custom-radio"  style="margin: 0">
      <input id="edit-user-female-2" name="gender" type="radio" value="female" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Женский</span>
    </label>
  </div>
</div>
<div class="separator"></div>
<div class="button" data-gender="female">Выбрать женский</div>
<div class="button" data-gender="male">Выбрать мужской</div>

4
  • Через кнопку и у меня работает, если я сам на неё нажму, но если имитировать нажатие на кнопку, а она якобы на радио - то не работает.
    – Tsyklop
    15 сен 2017 в 17:21
  • штука в том что у меня все в динамике/
    – Tsyklop
    15 сен 2017 в 17:26
  • все, сделал другой костыль.
    – Tsyklop
    15 сен 2017 в 17:35
  • Если я правильно понимаю, можете попробовать применять еще к этой радио кнопке .trigger('change') 15 сен 2017 в 20:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.