使按钮像复选框一样工作，挖空js

所以基本上我的html上有一个按钮，上面有一个小js，点击时按钮变绿，再次点击时按钮变灰，让它感觉像打开和关闭。这是按钮的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.打开电子邮件通知

和

$root.关闭电子邮件通知

在同一个按钮中，所以我可以给它一种打开和关闭的感觉。