javascript - 根据css样式的绑定(bind)改变aria-label

Question

我有一个带有 aria-label 的复选框，但我不确定如何更改此 aria-label 文本以反射(reflect)用户是否选中该复选框。是否可以在渲染 css 的同一函数中控制 aria-label 文本？

选中和取消选中框的函数:

checkbox = ko.pureComputed(function () {
     var checked = checked(),
         uncheck = uncheck(),
         checkedIcon = 'icon_check',
         uncheckedIcon = 'no_check',

                if (checked) {
                    //Can i add in here what the aria-label text should be?
                    return checkedIcon;
                }

                if (uncheck) {
                    return uncheckedIcon;
                }
            });

Answer 1

如果您想根据复选框值更改属性，可以执行类似的操作。 HTML:

<input type="checkbox" data-bind="checked:Mycheckbox,attr:{'aria-label':MyAriaLabel}" >

虚拟机:

 $(function () {
  var MainViewModel = function () {
     var self = this;
     self.MyAriaLabel = ko.observable('aria-lebel');
     self.Mycheckbox = ko.observable();

     self.Mycheckbox.subscribe(function(newVal){
       self.MyAriaLabel(newVal?'Something' : 'Something else');
     })
  }
  ko.applyBindings(new MainViewModel());
})

示例:http://jsfiddle.net/GSvnh/5129/