使用 jquery 填充自动完成值后，如何使文本框只读？

Question

我这里有一个文本框，它的数据是使用 JSON 自动填充的。在选择任何自动完成值（建议字段）后，我希望文本框只读。

文本框代码：

$(document).ready(function () 
{ 
$('#patient_id').autocomplete({
 source: function( request, response ) {
  $.ajax({
   url : 'opdpatientajax.php',
   dataType: "json",
   data: {
      name_startsWith: request.term,
      type: 'patientname',
      row_num : 1
   },
    success: function( data ) {
     response( $.map( data, function( item ) {
     var code = item.split("|");
     return {
      label: code[0],
      value: code[0],
      data : item
     }
    }));
   }
  });
 },
 autoFocus: true,        
 minLength: 0,
 select: function( event, ui ) {
  var names = ui.item.data.split("|");
  console.log(names[1], names[2], names[3]);      
  $('#patientAddress').val(names[1]);
  $('#patientSex').val(names[2]);
  $('#patientAge').val(names[3]);
 }         
  });
});

<input type="text" id="patient_id" name="patient_nm"  
  placeholder="Enter and select Mother Name" title="Please Enter and select patinet name">

Answer 1

$("#patientAddress").attr("disabled", "disabled");

如果您想将字段提交到$_POST，您需要在发送表单之前启用它。

$(document).ready(function () 
{ 
$('#patient_id').autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'opdpatientajax.php',
            dataType: "json",
            data: {
               name_startsWith: request.term,
               type: 'patientname',
               row_num : 1
            },
             success: function( data ) {
                 response( $.map( data, function( item ) {
                    var code = item.split("|");
                    return {
                        label: code[0],
                        value: code[0],
                        data : item
                    }
                }));
            }
        });
    },
    autoFocus: true,            
    minLength: 0,
    select: function( event, ui ) {
        var names = ui.item.data.split("|");
        console.log(names[1], names[2], names[3]);                      
        $('#patientAddress').val(names[1]);
        $('#patientSex').val(names[2]);
        $('#patientAge').val(names[3]);

        $("#patientAddress").attr("disabled", "disabled"); 
        $("#patientSex").attr("disabled", "disabled"); 
        $("#patientAge").attr("disabled", "disabled"); 

    }               
  });
});

或者您可以使用 this method:

$( "#other" ).click(function() {
  $( "#target" ).blur();
});

使用 jquery 填充自动完成值后，如何使文本框只读？

How make textbox readonly after filled with autocompleted value using jquery?

javascript

ajax

jquery

json

autocomplete