I use bootstrap 4 .

There is data that is loaded from the server.

There are two 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>

When retrieving the data, I will do either the first or second checked :

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

But at the same time it is not visible visually. what is the problem?

  • or editModal not what you think, or user.genderTitle not male/female - Igor
  • editModal is a modal window. In addition, I expose a bunch of data and everything is inserted normally. checked user.genderTitle output to the console that it finds jQ - that's right. - Tsyklop
  • console.log(editModal.find('input.custom-control-input[name="gender"][value="'+user.genderTitle+'"]').length); - what does it do? - Igor
  • @Igor finds exactly the radio you need. - Tsyklop

1 answer 1

Here is an example, when you click on a button, the corresponding value is selected and everything is perfectly visible visually. See that you can be implemented differently.

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

  • Through the button and it works for me, if I press it myself, but if I simulate a button press, and it’s supposedly on the radio, it doesn’t work. - Tsyklop
  • the thing is that I have everything in dynamics / - Tsyklop
  • everything made another crutch. - Tsyklop
  • If I understand correctly, you can try to apply this radio button .trigger ('change') - Vladimir Novopashin