使用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"); 

    }               
  });
});

或者您可以使用此方法 ：

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