1. 问题背景与常见误区
在前端开发中，我们经常需要根据用户交互或数据状态来动态调整表单元素的属性。一个常见的需求是：当用户点击或聚焦某个输入框时，允许其编辑；但对于页面上其他未被聚焦的输入框，如果它们当前没有值（即为空），则保持其只读状态，防止用户误操作；如果它们已有值，则不应强制设置为只读。
开发者在尝试实现此功能时，常会遇到一个误区。例如，当需要检查页面上所有具有特定类名（如.rate）的输入框是否为空时，可能会错误地使用$('.rate').val() == ''这样的表达式。然而，jQuery的$('.selector').val()方法在应用于一个包含多个元素的集合时，只会返回集合中第一个元素的当前值。这意味着，即使集合中存在多个空输入框，上述表达式也可能因为第一个输入框有值而返回false，导致判断失误。
2. 正确的解决方案：遍历与精确判断
为了正确地实现上述需求，我们需要对每个目标输入框进行单独的检查和处理。jQuery提供了each()方法，允许我们遍历一个jQuery对象集合中的所有元素，并对每个元素执行指定的操作。
2.1 HTML 结构示例
假设我们有如下一组输入框，它们都带有rate类名，并且初始状态可能被设置为readonly：
2.2 JavaScript 实现
以下是使用jQuery实现所需功能的正确代码：
$(document).ready(function() {
// 绑定焦点事件到所有具有'rate'类的输入框
$(document).on('focus', '.rate', function() {
// 首先，遍历所有具有'rate'类的输入框
$('.rate').each(function(i, el) {
// 对于每个输入框，检查其值是否为空（考虑空白字符）
if ($(el).val().trim() === "") {
// 如果为空，则将其设置为只读
$(el).attr('readonly', true);
}
// 注意：如果非空，则不进行任何操作，保持其原有状态（可能是可编辑，也可能仍是只读，取决于初始设置或之前的操作）
// 在本例中，我们只关心将空值设置为只读。
// 如果需要确保非空输入框在失去焦点时变为可编辑，则需要更复杂的逻辑或在失去焦点事件中处理。
});
// 最后，移除当前被聚焦输入框的只读属性，使其可编辑
$(this).removeAttr("readonly");
});
});代码解析：
-
$(document).on('focus', '.rate', function() { ... });：
- 使用事件委托（$(document).on()）来监听所有.rate类输入框的focus事件。这对于动态添加到DOM的元素也有效。
- this在事件处理函数内部指向当前被聚焦的DOM元素。
-
$('.rate').each(function(i, el) { ... });：
- 这是解决问题的关键。它遍历了所有带有rate类名的输入框。
- i是当前元素在集合中的索引。
- el是当前的DOM元素（一个原生DOM对象）。
-
if ($(el).val().trim() === "") { ... }：
- $(el)将原生DOM元素el包装成一个jQuery对象，以便可以使用jQuery方法。
- $(el).val()获取当前输入框的值。
- .trim()方法用于去除字符串两端的空白字符（如空格、制表符、换行符）。这确保了即使输入框中只包含空格，也被认为是空的。
- === ""严格比较，判断处理后的值是否为空字符串。
-
$(el).attr('readonly', true);：
- 如果当前遍历到的输入框为空，则将其readonly属性设置为true。
-
$(this).removeAttr("readonly");：
- 在遍历所有输入框并处理其只读状态之后，最后一步是确保当前用户正在聚焦的输入框是可编辑的。$(this)指向触发focus事件的那个输入框，removeAttr("readonly")移除其只读属性。
2.3 视觉反馈（可选）
为了更好地调试或向用户提供视觉反馈，可以通过CSS为只读输入框添加样式：
input[readonly] {
border: 1px solid red; /* 只读输入框边框显示为红色 */
background-color: #f0f0f0; /* 背景色变灰 */
}3. 注意事项与最佳实践
- jQuery 版本： 确保页面中已引入jQuery库。示例代码使用了jQuery 3.3.1。
- 事件委托： 推荐使用$(document).on('event', 'selector', function() { ... });进行事件绑定，尤其是当你的表单元素可能是动态生成时。
- 空值判断： 始终使用.trim()来处理用户输入或从DOM获取的文本值，以避免因空白字符导致的不准确判断。
- 逻辑清晰： 在处理多元素状态时，明确每个元素的期望状态，并按步骤实现。本例中，先统一处理所有非当前聚焦元素的只读状态，最后再解除当前聚焦元素的只读状态，逻辑清晰。
- 性能考量： 对于非常大量的输入框，频繁的DOM操作可能会影响性能。但在大多数常见的表单场景下，这种方法是高效且可接受的。
4. 总结
通过本文的讲解，我们理解了在jQuery中处理多元素集合时，直接使用.val()的局限性，并掌握了利用each()方法遍历集合，结合trim()进行精确空值判断的正确实践。这种方法不仅解决了特定场景下的只读状态控制问题，也为我们处理其他基于元素内容的动态行为提供了通用思路。掌握这些核心技巧，将有助于我们编写更健壮、更符合预期的前端交互代码。
