Question

当尝试创建单选按钮输入并设置checked属性时，checked属性将永远不会出现。有趣的是，:checked状态元素的CSS就像VoiceOver当时为选定的单选按钮读出的一样。

下面是一个显示该问题的Ember旋转：

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

您会看到checked属性从不出现在选定的单选按钮上，但是DOM元素和CSS都显示为选中或选中状态。

有人知道是什么原因导致这种明显的冲突吗？

Answer 1

问题是您甚至没有将value属性设置为单选按钮，也没有更改current中的controller/application.js属性。

您应该更改templates/application.hbs中的三件事。首先，您应该将value属性包含到单选按钮value={{option}}中，并对onclick属性onclick={{action 'changeChecked'}}进行操作以指定更改。由于{{eq}}助手本身会返回true or false，因此您也可以将没有{{if}}助手的选中属性写为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中动态获取选定的单选按钮。

Answer 2

您应该使用：

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

代替：

$('input[checked]').val()

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

2 个答案: