Поставить аттрибут checked у input radio

262

17 сентября 2017, 02:36

Использую 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);

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

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