jQuery: 禁用/启用输入元素

在Web开发中，我们经常需要动态禁用或启用页面上的输入元素（如input、select、textarea等）。使用jQuery，可以非常方便地实现这个功能。

禁用/启用单个元素

要禁用单个元素，可以使用prop()方法，将disabled属性设成true；要启用单个元素，将disabled属性设成false。

// 禁用单个输入框
$('#myInput').prop('disabled', true);
// 启用单个输入框
$('#myInput').prop('disabled', false);

在实际应用中，经常要根据某些条件来动态修改元素的状态。例如，根据复选框是否选中来启用或禁用一个输入框：

<input id="myInput" type="text">
<input id="myCheckbox" type="checkbox">

<script>
    $(function () {
        $('#myCheckbox').on('change', function () {
            $('#myInput').prop('disabled', !$(this).prop('checked'));
        });
    });
</script>

禁用/启用多个元素

要禁用/启用多个元素，可以使用选择器选中这些元素，再调用prop()方法设置它们的disabled属性。例如：

// 禁用多个输入框
$('input[type="text"], textarea').prop('disabled', true);
// 启用多个输入框
$('input[type="text"], textarea').prop('disabled', false);

同样，也可以根据某些条件来动态禁用/启用一组元素。例如，根据单选框选择的值来禁用/启用一组输入框：

<input name="myRadio" type="radio" value="1">
<input name="myRadio" type="radio" value="2">
<input class="myInput" type="text">
<input class="myInput" type="text">

<script>
    $(function () {
        $('input[name="myRadio"]').on('change', function () {
            var val = $(this).val();
            $('.myInput').prop('disabled', val === '2');
        });
    });
</script>

以上就是使用jQuery禁用/启用输入元素的方法。使用这种方法，能够帮助我们轻松地实现页面元素状态的动态切换，提升用户体验。