每次点击“添加”按钮时，我都会在html页面中重复一个模板。我想基于特定索引访问标识为selectListGroup的输入。
例如：如果用户在第二个模板上，我想仅为第二个模板禁用selectListGroup。
<script type="text/html" id="attributeTemplate">
<div class="margin_top10"> </div>
<div class="oj-flex cls_main_template" data-bind="attr: {index:$index()}">
<div class="oj-flex-items-pad oj-sm-1 alignCenter " > + </div>
<div class="oj-flex-items-pad oj-sm-11 " >
<div class="oj-padding oj-panel-alt2" style="border:1px solid #e8e8e8;border-radius:5px;">
<div class="oj-flex">
<div class="oj-sm-4">
<div class="padding10">
<select id="selectListCondition" data-bind="ojComponent: {component: 'ojSelect',
optionChange:function(event,ui){$parent.Onchg_Condition(event, ui, $index())},
rootAttributes: {style:'max-width:10em'}}">
<option value="AND">AND</option>
<option value="OR">OR</option>
</select>
</div>
</div>
<div class="oj-sm-4"></div>
<div class="oj-sm-4">
<div class="padding10 floatRight"><button class="margin-left3 deleteBtn" data-bind="click:function(event, ui) {$parent.btnDeleteConditionClick(event, ui, $element, $index());}, ojComponent: {component: 'ojButton', label: 'Delete Condition'}"> </button> </div>
</div>
</div>
<div class="oj-flex oj-panel-alt1" style="border:1px solid #e8e8e8; border-radius:5px;">
<div id="entityDiv" class="floatLeft padding10 oj-invalid cls_query_input">
<select id="selectListEntity" data-bind="ojComponent:
{component: 'ojSelect',
options:$parent.arr_entities,
optionChange:function(event,ui){$parent.Onchg_Entity(event, ui, $index())},
placeholder: $parent.emptyPlaceholder() ? '' : 'Select Entity',
rootAttributes: {style:'max-width:10em'}}">
<option value="Item">Item</option>
<option value="Catalog">Catalog</option>
<option value="EFF">EFF</option>
<option value="Structure">Structure</option>
<option value="Relationship">Relationship</option>
</select>
</div>
<div class="floatLeft padding10 cls_query_input" style="width:22%">
<input id="selectListGroup" disable
data-bind="ojComponent: {component: 'ojSelect',
placeholder: $parent.emptyPlaceholder() ? '' :'Select Group',
options:$parent.arr_groups,
optionChange:$parent.Onchg_Groups,
rootAttributes: {style:'max-width:25em'}}"/>
</div>
<div class="floatLeft padding10 cls_query_input" style="width:20%">
<select id="selectListAttribute" data-bind="ojComponent:
{component: 'ojSelect',
optionChange: $parent.Onchg_Attribute,
options: $parent.arr_attributes,
placeholder: $parent.emptyPlaceholder() ? '' : 'Select Attribute',
rootAttributes: {style:'max-width:25em'}}">
</select>
</div>
<div class="floatLeft padding10 cls_query_input">
<select id="selectListOperator" data-bind="ojComponent:
{component: 'ojSelect',
optionChange:$parent.Onchg_Operator,
placeholder: $parent.emptyPlaceholder() ? '' : 'Select Operator',
rootAttributes: {style:'max-width:20em'}}">
<option value="equal">equal</option>
<option value="not_equal">not equal</option>
<option value="in">in</option>
<option value="not_in">not in</option>
<option value="less">less</option>
<option value="less_or_equal">less or equal</option>
<option value="greater">greater</option>
<option value="greater_or_equal">greater or equal</option>
<option value="between">between</option>
<option value="not_between">not between</option>
<option value="is_null">is null</option>
<option value="is_not_null">is not null</option>
</select>
</div>
<div class="padding10 cls_query_input">
<div class="floatLeft" data-bind="if:$parent.showText">
<input class="cls_textInput" type=text data-bind="ojComponent: {component: 'ojInputText'}"
placeholder="Enter the attribute Value"/>
</div>
<div class="floatLeft" data-bind="if:$parent.showNumber">
<input data-bind="ojComponent: {component: 'ojInputNumber',
value: $parent.numberAttrValue}"
placeholder="Enter the attribute Value"/>
</div>
<div class="floatLeft" data-bind="if:$parent.showDate">
<input data-bind="ojComponent: {component: 'ojInputDate',
value: $parent.dateAttrValue}"
placeholder="Enter the attribute Value"/>
</div>
</div>
<div class="oj-messaging-inline-container" aria-live="polite" data-bind="if:$parent.showErrorMsg">
<div class="oj-message oj-message-error">
<span class="oj-component-icon oj-message-status-icon oj-message-error-icon" title="Error" role="img"></span>
<div class="oj-message-content">
<div class="oj-message-summary">Error</div>
<div class="oj-message-detail">
<span data-bind="text:$parent.error_messageDetails"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
我有以下函数，当特定模板的实体下拉列表发生更改时，会调用该函数。
self.Onchg_Entity = function (context, data, index) {
};
根据数据，我希望为此特定索引禁用selectListGroup
答案 0 :(得分：0)
这将生成具有相同ID selectListGroup的多个控件，这是无效的HTML。
使用attr绑定使ID动态化：
data-bind="attr: { id: 'selectListGroup' + someNumericVar() }"
其中someNumericVar是视图模型中的自动递增属性，具体取决于您单击“添加”的次数。
实际上，您看起来有一个具有rootAttributes属性的自定义绑定;使用它而不是attr。