如何根据另一个字段的值启用或禁用字段值的编辑？答案

【问题标题】：how to enable or disable editing of a field value depending on another field's value?如何根据另一个字段的值启用或禁用字段值的编辑？
【发布时间】：2018-04-22 23:23:36
【问题描述】：

我有两个字段，一个需要依赖于另一个字段的值。第一个字段是“RELEASE”，其中有“最新”和“正在进行”作为下拉选项。第二个字段是“BUILD”，只有当我们选择“on-going”作为发布时才可以编辑。当版本是“最新”时，它应该采用默认值并且不可编辑。

test.html

{{> afQuickField name='Release' options='allowed'  }}
<span title = "eg:PRODUCT/10.X.X.1234 or PRODUCT:latest">
  <a style="font-size:1.2em"><h5>ProductBuild</h5></a>
</span>
{{> afQuickField name='PRODUCT_BUILD' }}

我还在尝试为 PRODUCT_BUILD 字段设置工具提示，以便当用户将鼠标悬停在该字段上时，他/她将知道正确的格式，例如“PRODUCT:latest”表示“最新”和“PRODUCT/10.XX1234”表示“进行中”。

schema.js

Release:{
  type: String,
  label: "Release",
  optional: true,
  allowedValues:["LR-Latest Release","OR-Ongoing Release"],
  autoform:{
    afFieldInput:{
      firstOption:"(Select the Release)"
    }
  }
},
PRODUCT_BUILD:{
  type:String,
  label:' ', 
  regEx: /^(PRODUCT)(\/|:)((([0-9]+\.)+[0-9]+)|(latest))/,
  defaultValue:"PRODUCT:latest"
},

我该怎么做？

【问题讨论】：

你的 PRODUCT_BUILD 应该有这个：autoform:{ readonly: function(){ if(AutoForm.getFieldValue('Release',Autoform.getFormId()){ return false;} else return true;}

标签： meteor meteor-autoform

【解决方案1】：

执行此操作的两种方法之一：

一：在自动表单中使用只读属性。

Release:{
  type: String,
  label: "Release",
  optional: true,
  allowedValues:["LR-Latest Release","OR-Ongoing Release"],
  autoform:{
    afFieldInput:{
      firstOption:"(Select the Release)"
    }
  }
},
PRODUCT_BUILD:{
  type:String,
  label:' ', 
  regEx: /^(PRODUCT)(\/|:)((([0-9]+\.)+[0-9]+)|(latest))/,
  defaultValue:"PRODUCT:latest",
  autoform:{
    readonly: function(){
      if(AutoForm.getFieldValue('Release') == 'on-going'){
        // if the above does not get you the "Release" field's value then try:
        // AutoForm.getFieldValue('Release','formID');
        // if your formID is dynamically set, then use AutoForm.getFormId(); to get the form's ID
        return false;
      }
      else {
        return true;
      }
    }
  }
},

二：使用custom function 设置/取消设置只读属性

Release:{
  type: String,
  label: "Release",
  optional: true,
  allowedValues:["LR-Latest Release","OR-Ongoing Release"],
  autoform:{
    afFieldInput:{
      firstOption:"(Select the Release)"
    }
  },
  custom: function(){
    if(this.value == 'on-going'){
      $('[name=PRODUCT_BUILD]').prop('readonly', true);
    }
    else {
      $('[name=PRODUCT_BUILD]').prop('readonly', false);
    }
  }
},
PRODUCT_BUILD:{
  type:String,
  label:' ', 
  regEx: /^(PRODUCT)(\/|:)((([0-9]+\.)+[0-9]+)|(latest))/,
  defaultValue:"PRODUCT:latest",
},

在实际尝试实施之前，您可以尝试使用这两种方法here。

【讨论】：