64454

KnockoutJS Required / Disabled attributes not removed

Question:

So I have a knockout prototype where you add inputs dynamically and then set each of their own settings. Think of its as a form builder is such. However, I noticed that disabled and required doesn't work that great. It sets the value to disabled or required but when I turn it into false it still remains on the element without its state, causing it to still function. Please can anyone help or give guidance.

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>

The 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()); });

Answer1:

You better use Knockout's own built-in <a href="http://knockoutjs.com/documentation/disable-binding.html" rel="nofollow">disable</a> binding-handler:

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

See <a href="http://jsfiddle.net/btod04xe/" rel="nofollow">Fiddle</a>

Alternatively, you can check for explicit 'truthfulness' in your condition so that Knockout will remove the attribute if the condition is not met. For example:

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

See this <a href="http://jsfiddle.net/btod04xe/2/" rel="nofollow">Fiddle</a> (type 'true' in the 'disabled' input to activate disabled).

Recommend

  • Webdriver Xpath Performance
  • Using a ListFragment with a SimpleCursorAdapter with the Holder Pattern
  • How do I resolve an ImageSource IRandomAccessStream seeking not supported error?
  • XGBOOST - DMATRIX
  • Sum and Average of a series of numbers inputed to a text field
  • Getting EOFError along with exceptions when using ftplib
  • Criterion causing memory consumption to explode, no CAFs in sight
  • How Get arguments value using inline assembly in C without Glibc?
  • How to make R's read_csv2() recognise the text characters properly
  • TextToSpeech.setEngineByPackageName() triggers NullPointerException
  • Implementation of State Monad
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • FileReader+canvas image loading problem
  • Linq Objects Group By & Sum
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Optimizing database types to compact database (SQLite)
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Cannot Parse HTML Data Using Android / JSOUP
  • How to get icons for entities from eclipse?
  • Buffer size for converting unsigned long to string
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Java static initializers and reflection
  • python draw pie shapes with colour filled
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • unknown Exception android
  • JaxB to read class hierarchy
  • Running Map reduces the dimensions of the matrices
  • reshape alternating columns in less time and using less memory
  • costura.fody for a dll that references another dll
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?