jquery - Set radio button checked with AJAX response

Question

I need to set a radio button in my form; it has to be checked with the values coming from an AJAX response.

My AJAX response is response.drive. "Manual" or "Auto" could be its value.

UPDATE: So I tried it some different ways, but I couldn't figure this out.

One way :

if(response.drive=="Manual") {
    .find('[name=drive]')[0].checked = true         
} else {
    .find('[name=drive]')[1].checked = true
}  

Another way:

.find("input:radio[name='drive'][value='"+ response.drive +"']")[0].checked = true.end()

This is how my ajax success function use to populate the form values.

.success(function(response) {
                    // Populate the form fields with the data returned from server
                    response = jQuery.parseJSON(response)
                    $('#editVehicle')

                            .find('[name="vehicle_id"]').val(response.vehicle_id).end()
                            .find('[name="vehicle_name"]').val(response.vehicle).end()
                            .find('[name="seats"]').val(response.seats).end()
                            .find('[name="luggage"]').val(response.luggage).end()
                            .find('[name="doors"]').val(response.doors).end()
                            .find('[name="emission"]').val(response.emission).end()

                            //.find('[name="drive"]').val(response.drive).prop("checked",true).end()
                            //.find('[name="aircon"]').val(response.aircon).prop("checked",true).end()
                            //.find("input:radio[name='drive'][value='"+ response.drive +"']")[0].checked = true.end()

                            //if(response.drive=="Manual"){
                .find('[name=drive]')[0].prop('checked').end()
                            //}else{
                                //.find('[name=drive]')[1].prop('checked')
                            //} 

                            .find('[name="rental"]').val(response.price).end();

                    // Show the dialog
---- -
---- 
---

This is HTML for radio button :

<div class="form-group">
    <label for="">Transmission :</label>
    <div class="col-sm-8">
        <label class="radio-inline">
            <input type="radio" name="drive" id="" value="1"> Manual
        </label>
        <label class="radio-inline">
            <input type="radio" name="drive" id="" value="2"> Auto
        </label>                                                                
    </div>
</div>      

How can I do this correctly?

Answer 1

Use

$('#editVehicle').find(':radio[name=drive][value="1"]').prop('checked', true);

Sample:

---

$(function() {
  response = {
    "vehicle_id": 2,
    "vehicle": "RENAULT TWINGO2798",
    "seats": 43,
    "luggage": 5,
    "doors": 34,
    "emission": 455,
    "drive": "Manual",
    "aircon": "Yes",
    "price": "435.000"
  };
  
  console.log(response.drive);
  
  if (response.drive == 'Manual')
    $('#editVehicle').find(':radio[name=drive][value="1"]').prop('checked', true);
  else
    $('#editVehicle').find(':radio[name=drive][value="2"]').prop('checked', true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editVehicle">
  <div class="form-group">
    <label for="">Transmission :</label>
    <div class="col-sm-8">
      <label class="radio-inline">
        <input type="radio" name="drive" id="" value="1">Manual
      </label>
      <label class="radio-inline">
        <input type="radio" name="drive" id="" value="2">Auto
      </label>
    </div>
  </div>
</div>