CODEWITHSUNDEEP
javascriptjqueryknockout.js
Lost
Lost

Reputation: 13565

click binding for checkbox not working properly in Knockout

I have a checkbox and textbox. I want textbox to be empty and not editable whenever checkbox is not selected.

Part where I have to disable the textbox when textbox is un-selected works fine but emptying part does not work fine because I have to use checkbox's click binding for it and as soon as I use click binding, it breaks the checkbox behavior and it becomes unclickable. I have a jsFiddle for it: http://jsfiddle.net/qK5Y3/16/

and a code sample below:

<input type="checkbox" id="emailTemplateSendAtTime" name="emailTemplateSendAtTime" data-bind="checked:SendAtTime, click:ClickSendAtTime"/>
<input type="text" style="width: 250px" id="emailTemplateSendAtTimeProperty" data-bind="value: SendAtTimeProperty, enable:SendAtTime"/>

This is my js:

var ViewModel = function () {

    this.SendAtTimeProperty = ko.observable("Something");
    this.SendAtTime = ko.observable();



    this.ClickSendAtTime = function () {
                if (model.SendAtTime() == false) {
                    model.SendAtTimeProperty("");
                }
            };
};
ko.applyBindings(new ViewModel());

Any suggestions?

Upvotes: 3

Views: 7294

Answers (2)

ebram khalil
ebram khalil

Reputation: 8321

Inside your ViewModel the variable model is not defined so you should remove it and instead use this and inside the checkbox click event return true so that the event work as normal (if you didn't return anything or false the event 'll be as if it has been cancelled)

var ViewModel = function () {
    self = this;
    self.SendAtTimeProperty = ko.observable("Something");
    self.SendAtTime = ko.observable();
    this.ClickSendAtTime = function () {
        if (self.SendAtTime() == false) {
            self.SendAtTimeProperty("");
        }
        return true;
    };
};
ko.applyBindings(new ViewModel());

Upvotes: 2

Claudio Redi
Claudio Redi

Reputation: 68400

Two things:

  • add model as parameter for ClickSendAtTime

  • return true on ClickSendAtTime to avoid cancelling the event

    var ViewModel = function () {

    this.SendAtTimeProperty = ko.observable("Something");
    this.SendAtTime = ko.observable();

    this.ClickSendAtTime = function (model) {
            if (model.SendAtTime() == false) {
                model.SendAtTimeProperty("");
            }
            return true;
        };
};

ko.applyBindings(new ViewModel());

Another way to define ClickSendAtTime

this.ClickSendAtTime = function () {
      if (this.SendAtTime() == false) {
          this.SendAtTimeProperty("");
      }
      return true;
};

Some information about why you need to return true

Allowing the default action

By default, Knockout will prevent the event from taking any default action. For example if you use the event binding to capture the keypress event of an input tag, the browser will only call your handler function and will not add the value of the key to the input element’s value. A more common example is using the click binding, which internally uses this binding, where your handler function will be called, but the browser will not navigate to the link’s href. This is a useful default because when you use the click binding, it’s normally because you’re using the link as part of a UI that manipulates your view model, not as a regular hyperlink to another web page.

However, if you do want to let the default action proceed, just return true from your event handler function.

http://knockoutjs.com/documentation/event-binding.html

Upvotes: 8

Related Questions