Атрибут `checked` на входе переключателя не существует

Question

При попытке создать радиокнопку и установить атрибут checked атрибут checked никогда не появляется. Интересно, что CSS для элементов состояния :checked работает так же, как VoiceOver считывает выбранную радиокнопку в данный момент.

Вот трюк Ember, который отображает эту проблему:

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

Вы увидите, что атрибут checked никогда не появляется на выбранном переключателе, но как элемент DOM, так и CSS отображаются как отмеченные или выбранные.

Кто-нибудь знает, что может быть причиной этого очевидного конфликта?

Answer 1

Проблема в том, что вы даже не установили атрибут значения для переключателей, а также не изменили свойство current в controller/application.js.

Вы должны изменить три вещи в templates/application.hbs. Сначала вы должны включить атрибут значения в переключатели 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 $('input:radio:checked').val();

Теперь вы можете динамически получать выбранный переключатель в DOM.

Answer 2

Вы должны использовать:

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

вместо:

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