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

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

本文关键字：文本只读 jquery 何使用填充更新时间：2023-09-26

这里有一个文本框，它的数据是通过使用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">

$("#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();
});