Make button act like checked box, knockout js

So basically I have a button on my html which has a small js on it which onclick turns the button green and when clicked again turns the button grey to make it feel like its turning on and off. Here is the JS and the HTML code for the button

<script>
$('#button1').click(function() {
    //Now just reference this button and change CSS
     $(this).toggleClass('buttonClassA');
});
</script>

<button type="button" class="col-md-2 notice-btns btn " id="button1">
            <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
            <p data-bind="if : $data.emailNotification == 1 ">On</p>
            <p data-bind="if : $data.emailNotification == 0 ">Off</p>
          </button>

I have two knockout function which needs to be called when the button is clicked which are

self.emailNotification = ko.observable(); 
        self.turnOnEmailNotification = function () {
            $.ajax({
                type: 'POST',
                url: BASEURL + 'index.php/myprofile/checkNotificationValue/' + auth  + "/" + self.emailNotification(1) ,
                contentType: 'application/json; charset=utf-8'
            })
            .done(function(notifications) {
                self.emailNotification.removeAll();
                self.emailNotification.push(notifications);
            })
            .fail(function(xhr, status, error) {
                alert(status);
            })
            .always(function(data){                 
            });
        };

        self.turnOffEmailNotification = function () {
            $.ajax({
                type: 'POST',
                url: BASEURL + 'index.php/myprofile/checkNotificationValue/' + auth  + "/" + self.emailNotification(0) ,
                contentType: 'application/json; charset=utf-8'
            })
            .done(function(notifications) {
                self.emailNotification.removeAll();
                self.emailNotification.push(notifications);
            })
            .fail(function(xhr, status, error) {
                alert(status);
            })
            .always(function(data){                 
            });
        };

I tried the data-bind checked but then i lose the buttons so need help to call both the ajax calls

$root.turnOnEmailNotification

and

$root.turnOffEmailNotification

in the same button and so I can give it a feeling its turning on and off.

Answers


Checked isn't a valid attribute for button element .Instead you can use click to achieve the same via toggling .

view:

<button type="button" data-bind="click:tgle,style:{'background-color':emailNotification()==0 ? 'red':'green'}">
<p data-bind="text:$data.emailNotification() == 1 ? 'On' : 'Off' "></p>
</button>

viewModel:

var ViewModel = function() {
  var self = this;
  self.emailNotification = ko.observable(0);
  self.tgle = function() {
    self.emailNotification(self.emailNotification() == 1 ? 0 : 1)
    switch (self.emailNotification()) {
      case 0:
        console.log('turn off ajax fired');
        //turnOFFEmailNotification 
        //$.ajax({
        //  Do ajax stuff               
        //});
        break;
      case 1:
        console.log('turn on ajax fired');
        //turnOnEmailNotification //default off
        //$.ajax({
        //  Do ajax stuff               
        //});
        break;
      default:
        break;
    }
  }
};

ko.applyBindings(new ViewModel());

working sample up for grabs


Need Your Help