jQuery 如何给添加“readonly”属性

在本文中，我们将介绍如何使用jQuery给元素添加“readonly”属性。具有“readonly”属性的元素只能读取文本，而不能编辑或修改。

1. 通过.attr()方法添加readonly属性

我们可以使用jQuery的.attr()方法来添加“readonly”属性。该方法用于获取或设置选择元素的属性值。

<input type="text" id="myInput" value="这是只读的文本框">

$(document).ready(function(){
  // 添加readonly属性
  $('#myInput').attr('readonly', true);
});

在上面的示例中，我们首先选择id为“myInput”的元素，然后使用.attr()方法将“readonly”属性设置为true。此时，在页面加载完成后，该元素将变为只读，用户无法修改文本内容。

另一种设置元素readonly属性的方法是使用.prop()方法。该方法将选择元素的属性值设置为指定的值。

<input type="text" id="myInput" value="这是只读的文本框">

$(document).ready(function(){
  // 设置readonly属性为true
  $('#myInput').prop('readonly', true);
});

在上述示例中，我们选取id为“myInput”的元素，并使用.prop()方法将readonly属性设置为true。此时，该元素将变为只读状态。

除了使用readonly属性，我们还可以通过添加只读类来实现相同的效果。使用.addClass()方法可以为选定的元素添加一个或多个类。

<input type="text" id="myInput" value="这是只读的文本框">

.readonly {
  pointer-events: none;
  background-color: #eee;
}

$(document).ready(function(){
  // 添加只读类
  $('#myInput').addClass('readonly');
});

在上面的示例中，我们首先定义了一个.readonly类，其中包含了pointer-events属性和背景颜色。然后，我们使用.addClass()方法为id为“myInput”的元素添加了这个类。添加之后，该元素将无法编辑，并且背景颜色变为灰色。

通过使用jQuery，我们可以很方便地给元素添加“readonly”属性。我们可以使用.attr()方法或.prop()方法设置readonly属性，也可以通过添加只读类来达到相同的效果。根据具体的需求选择合适的方法来实现只读输入框的功能。希望本文对您有所帮助！