未删除 KnockoutJS 必需/禁用属性

Question

所以我有一个淘汰赛原型，您可以在其中动态添加输入，然后设置它们自己的每个设置。将其视为表单生成器就是这样。但是，我注意到 disabled 和 required 的效果不是很好。它将值设置为 disabled 或 required 但是当我把它变成 false 时它仍然保留在没有状态的元素上，导致它仍然起作用。请任何人提供帮助或指导。

HTML

<div class="leftpanel">
                <div class="input-row" data-bind="foreach: inputItems">                 
                    <div class="input-row-item">                
                        <div class="input-item">    
                            <label data-bind="text: label"></label>                 
                            <input data-bind="attr:{ name: name, placeholder: placeholder, disabled: disabled, value: value, type: type }">                 
                        </div>
                        <div class="input-settings">
                            <input type="text" class="nb-remove" data-bind="value: label" placeholder="input label">
                            <input type="text" value="text" class="nb-remove" data-bind="value: type" placeholder="input type">
                            <input type="text" class="nb-remove" data-bind="value: name" placeholder="input name">
                            <input type="text" class="nb-remove" data-bind="value: placeholder" placeholder="input placeholder">
                            <input type="text" class="nb-remove" data-bind="value: disabled" placeholder="input disabled">
                            <input type="text" class="nb-remove" data-bind="value: value" placeholder="input value">
                        </div>
                    </div>                  
                </div>          
            </div>
            <div class="rightpanel">
                Here be draggables!
                <br/>
                <button data-bind="click: addInput">ADD TEXT INPUT</button>
            </div>

JS

$(function(){
            var InputItem = function InputItem(label, type, name, placeholder, disabled, value) {
                this.label          = ko.observable(label);
                this.type           = ko.observable(type);
                this.name           = ko.observable(name);
                this.placeholder    = ko.observable(placeholder);
                this.disabled       = ko.observable(disabled);
                this.value          = ko.observable(value);
            }

            var ViewModel = function ViewModel() {
              var that = this;

              this.inputItems = ko.observableArray([]);

              this.addInput = function addInput() {
                that.inputItems.push(new InputItem());
              };

            }

            ko.applyBindings(new ViewModel());
        });

Answer 1

您最好使用 Knockout 自己的内置 disable 绑定处理程序：

<input data-bind="disable: disabled, attr: { name: name, placeholder: placeholder, value: value, type: type }" />

见Fiddle

或者，您可以在您的条件中检查显式 'truthfulness'，这样如果不满足条件，Knockout 将删除该属性。例如：

<input data-bind="attr: { disabled: disabled() === 'true', ...}" />

查看此 Fiddle（在 'disabled' 输入中键入 'true' 以激活 disabled）。

未删除 KnockoutJS 必需/禁用属性

KnockoutJS Required / Disabled attributes not removed

javascript

jquery

knockout.js