Установите переключатель переключателя Material Design Lite с jQuery

Question

У меня есть следующие переключатели в MDL. Я хотел бы знать, как установить один из параметров с помощью jquery. Я пробовал различные способы найти на SO или в Интернете ... но никто не работает.

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="sex-option-1"> 
    <input type="radio" id="sex-option-1" class="mdl-radio__button" name="sex-options" value="1"> 
    <span class="mdl-radio__label">Male</span> 
</label> 

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="sex-option-2"> 
    <input type="radio" id="sex-option-2" class="mdl-radio__button" name="sex-options" value="2"> 
    <span class="mdl-radio__label">Female</span> 
</label> 

MDL версия 1.1.1

Спасибо заранее.

Answer 1

Вот как вы должны проверить радио кнопки в MDL :

document.getElementById('sex-option-1').parentNode.MaterialRadio.check(); 

Сам по себе, я не думаю, что предыдущий ответ действительно работает. Он просто заворачивает презентацию MDL без фактического изменения выбранной кнопки. Вы должны использовать общедоступные методы MDL.

Существует также снимите флажок Метод:

document.getElementById('sex-option-1').parentNode.MaterialRadio.uncheck(); 

И для дальнейшего использования, поскольку Javascript MDL плохо документирована, вот методы для всех других типов ввода:

Checkbox:

document.getElementById('sex-option-1').parentNode.MaterialCheckbox.check(); 
document.getElementById('sex-option-1').parentNode.MaterialCheckbox.uncheck(); 

Переключатель:

document.getElementById('sex-option-1').parentNode.MaterialSwitch.on(); 
document.getElementById('sex-option-1').parentNode.MaterialSwitch.off(); 

TextField:

document.getElementById('sex-option-1').parentNode.MaterialTexfield.change('new text'); 

IconToggle:

document.getElementById('sex-option-1').parentNode.MaterialIconToggle.check(); 
document.getElementById('sex-option-1').parentNode.MaterialIconToggle.uncheck(); 

Answer 2

Принимая вдохновение из https://github.com/google/material-design-lite/issues/4164 раствор выглядит следующим образом:

$('#sex-option-1').parent().removeClass('is-checked'); 

непроверить и

$('#sex-option-1').parent().addClass('is-checked'); 

проверить