javascript - 如何使用 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();
});