单选按钮输入上的`checked`属性不存在

Question

尝试创建单选按钮输入并设置checked属性时,该checked属性永远不会出现.有趣的是,:checked状态元素的CSS 与VoiceOver当时为所选单选按钮读出的工作方式相同.

这是一个显示此问题的Ember旋律:

https://ember-twiddle.com/1c3c6686c49a0c8338e24acc66b05a26

您将看到该checked属性从未出现在所选单选按钮上,但DOM元素和CSS都显示为已选中或已选中.

有谁知道可能导致这种明显冲突的原因是什么？

Answer 1

问题是你甚至没有将值属性设置为单选按钮,也没有更改current属性controller/application.js.

你应该改变三件事templates/application.hbs.首先,您应该在单选按钮中包含value属性,value={{option}}并在onclick属性上包含一个操作onclick={{action 'changeChecked'}}以指定更改.由于{{eq}}帮助程序本身返回,true or false您还可以在没有{{if}}帮助程序的情况下编写checked属性,因为checked={{eq option current}} 最终输入标记应如下所示:

<input type="radio" name="colors" checked={{eq option current}} value={{option}} onclick={{action 'changeChecked'}}>

在那之后,controllers/application.js你必须添加动作changeChecked()

actions:{
  changeChecked(){
    set(this,'current',$('input:checked').val())
  }
},

而且,whichChecked应该将return语句更改为:

return $('input:radio:checked').val();

现在,您可以动态获取DOM中的选定单选按钮.