如何根据另一个字段的值启用或禁用对字段值的编辑?
how to enable or disable editing of a field value depending on another field's value?
我有两个字段,一个需要依赖于另一个字段的值。第一个字段是 "RELEASE",其中有 "latest" 和 "on-going" 作为下拉选项。第二个字段是 "BUILD" 只有当我们 select "on-going" 作为发布时才应该是可编辑的。当版本为 "latest" 时,它应该采用默认值且不可编辑。
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 字段设置工具提示,这样当用户将鼠标悬停在它上面时,he/she 会知道正确的格式,例如 "PRODUCT:latest" 表示最新和"PRODUCT/10.X.X.1234" 对于 "On-going".
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"
},
我该怎么做?
执行此操作的两种方法之一:
一:在自动表单中使用只读属性。
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到set/unset只读属性
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。
我有两个字段,一个需要依赖于另一个字段的值。第一个字段是 "RELEASE",其中有 "latest" 和 "on-going" 作为下拉选项。第二个字段是 "BUILD" 只有当我们 select "on-going" 作为发布时才应该是可编辑的。当版本为 "latest" 时,它应该采用默认值且不可编辑。
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 字段设置工具提示,这样当用户将鼠标悬停在它上面时,he/she 会知道正确的格式,例如 "PRODUCT:latest" 表示最新和"PRODUCT/10.X.X.1234" 对于 "On-going".
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"
},
我该怎么做?
执行此操作的两种方法之一:
一:在自动表单中使用只读属性。
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到set/unset只读属性
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。