如何使用jQuery禁用表单下拉列表

Question

我制作了一个下拉列表，从数据库中检索其内容：

图像2

图像1

在选择Received时，如何创建启用收件人姓名字段以及禁用收件人表单的条件？

var $inputs = $('#kliks');
$('select').change(function() {
$inputs.prop('disabled', $(this).val() === 'Received');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-10">
<label>Ubah status</label>
<select class="form-control col-lg-10" name="id_status">
<option value="0">Pilih</option>
<option value="Foo">Foo</option>
<option value="Bar">Bar</option>
<option value="Received">Received</option>
</select>
</div>
<div class="form-group col-md-10">
<input type="text" class="form-control kliks" id="kliks" name="" placeholder="nama penerima">
</div>

这不起作用。

Answer 1

带有事件的禁用下拉列表

jQuery('select').prop('disabled', true);

仅禁用下拉

jQuery('select').attr('disabled', true);

如果我们选择了"已接收"选项，我已更正代码并禁用下拉菜单

试试这个

jQuery(document).ready(function(){   
var $inputs = jQuery('#kliks');
jQuery('select').change(function() {
var target = jQuery(this);
var selected_val = target.find(':selected').val(); 
if (selected_val === 'Received') { alert(selected_val);
$inputs.prop('disabled', true);
}
});
});

jQuery(document).ready(function(){   
var $inputs = jQuery('#kliks');
	jQuery('select').change(function() {
		var target = jQuery(this);
		var selected_val = target.find(':selected').val(); 
		if (selected_val === 'Received') { alert(selected_val);
			$inputs.prop('disabled', true);
		}
	    
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control col-lg-10" name="id_status">
<option value="0">Pilih</option>
<option value="Foo">Foo</option>
<option value="Bar">Bar</option>
<option value="Received">Received</option>
</select>
<input type="text" name="kliks" id="kliks" value="xyz">