dimanche 30 novembre 2014

Toggle state of button based on select dropdown using knockout.js


I've got a small form I'm trying to add logic to, and right now I'm stuck trying to change the state of an 'add' button between enabled and disabled based on the selected value of a dropdown menu.


My DOM markup is the following:



<div>
<select data-bind="options: myOptions, optionsText: 'UserName', optionsValue: 'UserId', optionsCaption: 'Select...'"></select>
<input type="text" class="optional" />
<input class="addButton" type="submit" name="addButton" value="ADD" data-bind="enable: addButtonState" />
</div>


And my current Knockout.js code is the following:



self.addButtonState = ko.observable(false);
self.toggleAddButtonState = function () {

}


As you can see, the default value for the dropdown menu is select.... When this default is presented, I want the addButton to be in the disabled state. However, when any other option is selected, it can be enabled. The optional text field should not matter.


How can I accomplish this?





Aucun commentaire:

Enregistrer un commentaire