Установить радиокнопку с ответом AJAX

Question

Мне нужно установить переключатель в моей форме; его необходимо проверить со значениями, исходящими из ответа AJAX.

Ответы на мой AJAX: response.drive. «Ручной» или «Авто» может быть его значением.

ОБНОВЛЕНИЕ: Так что я пробовал это по-разному, но я не мог понять это.

Один из способов:

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

Другой способ:

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

Это как мой Аякса использование функции успеха для заполнения значений формы.

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

Это HTML кнопки для радио:

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

Как я могу сделать это правильно?

Answer 1

Использование

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

Пример:

---

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

Редактировать:

Изменить.

if (response.drive == 'Manual'){ 
           .find(':radio[name=drive][value="1"]').prop('checked', true) 
          } else { 
           .find(':radio[name=drive][value="2"]').prop('checked', true) 
          } 

к

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

---

$('.editVehicle').on('click', function() { 
      // Get the record's ID via attribute 
      var id = $(this).attr('data-id'); 
      var vehicleId = 'vehicleId=' + id; 

      $.ajax({ 
        url: './includes/ajaxprocess_edit_vehicles.php', 
        method: 'post', 
        data: vehicleId 
      }).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(); 

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



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

         // Show the dialog 
         bootbox 
           .dialog({ 
             title: 'Edit This Vehicle', 
             message: $('#editVehicle'), 
             show: false // We will show it manually later 
           }) 
           .on('shown.bs.modal', function() { 
             $('#editVehicle') 
               .show()      // Show the edit form 
               .formValidation('resetForm'); // Reset form 
           }) 
           .on('hide.bs.modal', function(e) { 
             // Bootbox will remove the modal (including the body which contains the edit form) 
             // after hiding the modal 
             // Therefor, we need to backup the form 
             $('#editVehicle').hide().appendTo('body'); 
           }) 
           .modal('show'); 
       }); 
     }); 

Answer 2

Вы можете дать идентификатор для каждого RadioButton, а затем:

$("#drive_1").attr('checked', 'checked');