Question

我有一个复选框，我有一个咏叹调标签，但我不知道如何更改此咏叹调标签文本以反映是否为用户选中了复选框。是否可以在同一函数中控制aria-label文本以呈现css？

检查和取消选中框的功能：

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

VM：

 $(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/

Answer 2

你可以，但听起来你正在使它变得比以前更加复杂。您可以使用checkbox输入类型的本机API，而不是手动设置aria-label。如果您的html是实际的复选框输入，例如：

<input id="check1" name="field-name" type="checkbox">

然后当它被检查时，它应该自动进行＆＃34;检查＆＃34;属性，哪些屏幕阅读器应该能够接受。如果失败，您可以使用aria-checked来补充它。

  var isChecked = element.getAttribute('checked')
  element.setAttribute('aria-checked', isChecked)

如果您因任何原因未使用普通input type="checkbox"标记，则可以在标记中添加role="checkbox"，以帮助浏览器对其进行处理。

额外奖励：在某些情况下，你甚至可以使用本机检查行为来处理你的css：

[type="checkbox"] { background-image: url('uncheckedIcon.png'); }
[type="checkbox"]:checked { background-image: url('checkedIcon.png'); }

根据css样式的绑定更改aria-label

2 个答案: