Как я могу отменить выбор радиокнопки пользователя после диалога отмены выбора?
В более крупном проекте у меня есть группа радиокнопок, которая обновляет текст в текстовой области. Однако иногда мне нужно позволить пользователю выбирать, действительно ли он хочет изменить текст.
Я использую скрытые радиокнопки, и отображаются только метки. Мне удалось открыть диалоговое окно подтверждения и предотвратить изменение текста в текстовой области, но я не смог фактически остановить радиопереключение от проверки недавно нажатого элемента. Я пытался сохранить ссылку на ранее проверенную кнопку радио, но я подозреваю, что в коде это уже слишком поздно. Для дальнейшей иллюстрации я сделал JSFiddle. Никогда не должно быть несоответствия между текстом кнопки и текстом в области, после того, как один был загружен.
http://jsfiddle.net/e0bxnghc/1/
Так есть ли способ отменить выбор пользователя радиокнопки?
HTML:
<nav id="selectors" class="segmented-button">
<input type="radio" name="group-1" value="car" id="radio1">
<label for="radio1" class="first">Car</label>
<input type="radio" name="group-1" value="boat" id="radio2">
<label for="radio2">Boat</label>
<input type="radio" name="group-1" value="plane" id="radio3">
<label for="radio3">Plane</label>
<input type="radio" name="group-1" value="train" id="radio4">
<label for="radio4" class="last">Train</label>
</nav>
<textarea id="output">output area</textarea>
JavaScript:
$(document).ready(function(){
$('#selectors label').click(function() {
var element = $(this).prev();
var confirmed = false;
var previousSelected = $("input[name=group-1]:checked");
var r = confirm("Are you sure you want to change the text?");
if (r == true) {
$("#output").val(element.val());
} else{
previousSelected.checked = true;
}
});
});
2 ответа
Возвращение false в else должно сделать это:
else{
previousSelected.checked = true;
return false;
}
Простое возвращение "false" из события щелчка переключателя откатывает действие назад. Нам не нужно сохранять ранее выбранный переключатель. Браузер делает это для нас:
$(document).ready(function () {
$('input[name=Group]').click(function () {
var confirmation = confirm('Are you sure you want to change the default message?');
if (!confirmation) {
return false;
}
})
});