如何在jQuery中使用input readonly属性

当我们需要设置表单输入框（input）为只读模式时，我们可以通过readonly属性来实现。在jQuery中，我们可以使用prop方法来设置和获取元素的属性值。

设置input readonly属性

我们可以使用以下jQuery代码将一个id为foo的input设置为只读模式：

$('#foo').prop('readonly', true);

取消input readonly属性

我们可以使用以下jQuery代码取消一个id为foo的input的只读模式：

$('#foo').prop('readonly', false);

示例

以下是两个简单的示例，说明了如何在jQuery中使用input readonly属性。

示例1：更改输入框的readonly属性以及值

<form>
  <label>用户名：</label>
  <input type="text" id="username" value="小明" readonly>
  <button type="button" id="changeVal">更改值</button>
  <button type="button" id="removeAttr">取消只读</button>
</form>

$(document).ready(function() {
    $('#changeVal').click(function() {
       $('#username').val('小华');
    });
    $('#removeAttr').click(function() {
        $('#username').prop('readonly', false);
    });
});

在这个示例中，我们首先将输入框设置为只读模式，然后使用val方法更改了其值，同时添加了一个按钮，用于移除只读模式。

示例2：动态设置输入框readonly属性

<form>
  <input type="checkbox" id="activate" name="activate" checked>激活输入框<br>
  <label for="name">姓名：</label>
  <input type="text" id="name" value="小明">
</form>

$(document).ready(function() {
    $('#activate').on('change', function() {
        if($(this).is(":checked")) {
            $('#name').prop('readonly', true);
        } else {
            $('#name').prop('readonly', false);
        }
    });
});

在这个示例中，我们使用了prop方法来动态设置输入框的readonly属性。当复选框处于选中状态时，输入框处于只读模式，否则输入框可编辑。