使按钮行为像复选框，淘汰赛js

Question

所以基本上我的html上有一个按钮，它上面有一个小的js，onclick将按钮变为绿色，再次点击时，按钮会变灰，让它感觉像是打开和关闭。这是按钮的JS和HTML代码

<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>

我有两个敲击功能，需要在单击按钮时调用

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){                 
            });
        };

我尝试了数据绑定检查，但后来我丢失了按钮，所以需要帮助调用两个ajax调用

  

$ root.turnOnEmailNotification

和

  

$ root.turnOffEmailNotification

在同一个按钮中，所以我可以感受到它的开启和关闭。

Answer 1

Checked不是按钮元素的有效属性。相反，您可以使用click来实现相同的切换。

查看：

<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>

<强>视图模型：

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

grabs

的工作样本