jquery - 设置使用 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()

这就是我的 ajax success 函数用来填充表单值的方式。

.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');
                });
        });