如何在一个字段输入数据时将另一个字段设为只读？W3Schools示例文本框疑问

嘿，这两个问题本质是相通的——利用AngularJS的双向数据绑定和ng-readonly指令就能轻松实现状态联动，我给你拆解清楚：

1. 基础需求：当一个字段有输入时，设置另一个字段只读 #

核心逻辑就是监听输入字段的模型值变化，把这个状态绑定到目标字段的ng-readonly属性上。

举个直观的例子：

<!-- 输入字段：绑定ngModel到userInput -->
<input type="text" ng-model="userInput" placeholder="在这里输入内容">
<br>
<!-- 目标字段：当userInput有值时自动变为只读 -->
<input type="text" ng-readonly="!!userInput" placeholder="这个字段会被只读">

这里的!!userInput是个实用小技巧：把输入内容转换成布尔值——只要userInput不是空字符串、null或undefined，就会返回true，触发只读状态。如果需要更严格的判断（比如必须输入至少2个字符），可以改成userInput.length >= 2这类条件。

2. 基于你给出的Checkbox示例，适配文本字段的处理 #

你提供的Checkbox示例是用复选框的ng-model（all）控制文本框的只读状态，换成文本字段触发的话，只需要把**复选框的ng-model换成输入字段的ngModel**就行，逻辑完全一致：

原来的Checkbox示例：

改成文本字段触发的版本：

<!-- 触发用的文本输入框 -->
<input type="text" ng-model="inputTrigger" placeholder="输入内容开启只读">
<br>
<!-- 被控制的文本框 -->
<input type="text" ng-readonly="!!inputTrigger" placeholder="我会被只读">

如果希望输入框失去焦点后才触发只读（而非实时输入时），可以结合ng-blur指令把状态存到单独变量里：

<input type="text" ng-model="tempInput" ng-blur="inputHasValue = !!tempInput" placeholder="输入后失焦触发">
<br>
<input type="text" ng-readonly="inputHasValue" placeholder="失焦后只读">

内容的提问来源于stack exchange，提问作者Lucas Moreira