Как вызвать событие начального изменения для переключателей с помощью jquery?
Я пытаюсь включить / отключить "другое" поле в нижней части набора переключателей, вот так...
window.init = function() {
debugger;
var form = $("#myform");
var enableOther = function() {
var other = $(this).val() == 'other';
form.find('input[name=other]').prop('disabled', !other);
};
var options = form.find('input:radio[name=myradio]');
options.change(enableOther);
//now I want to call the on-change handler to update the initial disabled value
$.proxy(enableOther, options)(); //these don't work
//options.trigger('change');
//options.triggerHandler('change');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="debugger; init();">Init</button>
<form id="myform">
<ul>
<li><input type="radio" name="myradio" value="1" />Item 1</li>
<li><input type="radio" name="myradio" value="2" />Item 2</li>
<li><input type="radio" name="myradio" value="3" />Item 3</li>
<li><input type="radio" name="myradio" value="other" />Other</li>
<li><input type="text" name="other" /></li>
</ul>
</form>
(нажмите "Инициализация", выберите "Другой", снова нажмите "Инициализация", и поле по ошибке станет недоступным)
Это хорошо работает при нажатии на каждый элемент, но я хочу иметь возможность .change()
Триггер обратного вызова jquery один раз в функции init (этот фрагмент переходит во всплывающую форму с постоянными значениями). я пробовал .proxy
а также trigger
, но я, кажется, получаю все радио кнопки и .val()
это индивидуальное значение, а не выбранное.
Как я должен искусственно вызывать этот обратный вызов?
1 ответ
Радио кнопки странные.
В вашем обратном вызове используйте селектор для того, который проверен.
var myval = $('input[type="radio"][name="myradio"]:checked').val();
var other = myval == 'other';
Примечание: использовать [type="radio"]
не :radio
поскольку это позволяет селектору быть более эффективным, когда браузеры поддерживают это.
Тест: чтобы доказать концепцию, установите ДРУГОЕ до вызова init:
$('input[type="radio"][name="myradio"]').eq(3).prop('checked',true);
а затем тот, который не является:
$('input[type="radio"][name="myradio"]').eq(2).prop('checked',true);
Затем используйте то, что вы пытались:
options.trigger('change');