输入字段的只读属性答案

【问题标题】：Read Only property for input field输入字段的只读属性
【发布时间】：2021-11-23 02:27:32
【问题描述】：

我希望发生的事情是，当 status 字段 的值为 Paid 时，输入字段罚款应该是只读的。如何做到这一点？

这是我的表格：

这是我的代码：

   <div class="form-group">
                    <label for="status" class="col-sm-3 control-label">Status</label>
                    <div class="col-sm-9">
                    <input type="text" class="form-control" id="status" value = "Paid" name="status"  readonly>
              </div>
                    
                </div>


             
             <div class="form-group">
                    <label for="fines" class="col-sm-3 control-label">Fines</label>
                    <div class="col-sm-9">
                    <input type="text" 
                               class="form-control" id="fines"  name="fines"   required>
                    </div>
                </div>

Javascript 代码行：

<script type = "text/javascript">

$(document).ready (function(){
$('input[type=text][name=status]').change(function() {
    if (this.value == "Paid") {
        $("#fines").prop("readonly",true);
    }
    else{
        $("#fines").prop("readonly",false);
    }
});
}); 
</script>

【问题讨论】：

“状态”字段也是只读的，那么您如何期望任何“更改”事件发生在它上面？它不会发生，因为用户无法修改字段值。您究竟希望何时应用只读设置？应该在表单加载到浏览器时立即执行，还是稍后某个时间？
您的意思是，当您将字段从可编辑更改为只读时，必须对状态字段进行操作？
不，这根本不是我的意思。我在问你应该是什么触发器才能做出改变？因为目前您编写的代码并没有真正意义——它永远不会触发（由于我在第一条评论中提到的原因）

标签： javascript php html jquery css

【解决方案1】：

看到您的状态字段在加载时设置为只读，我想您想立即触发更改事件。

$(document).ready (function(){

  // setup a variable for multi-use
  var $statusField = $('input[type=text][name=status]');

  // watch for changes to the statusField
  $statusField.change(function() {
    
      // simpler check for paid status
      $('#fines').prop('readonly', this.value === 'Paid');
  });
  
  // trigger a change on ready
  $statusField.change();
 
});

通过这种方式，您可以通过编程方式触发更改，还可以查看状态字段。我还稍微清理了你的代码！

【讨论】：

【解决方案2】：

这样试试

if ($(this).val() == "Paid") {
            $("#fines").attr("readonly",true);
        }
        else{
            $("#fines").attr("readonly",false);
        }

【讨论】：