2017-02-10 4 views
1

Я пытаюсь отключить переключатели с помощью jQuery, но у меня проблемы с функцией prop. Когда этот код работает, мой условный ($(e.currentTarget).prop('checked')) всегда имеет значение true.Не удается отменить выбор радиокнопки?

Вот скрипка, которая показывает мой вопрос: Jsfiddle

FYI: Я использую JQuery 1.8.2, и я не могу обновить его, потому что это наследие проект со многими зависимостями. Кроме того, я ДОЛЖЕН использовать переключатели по запросу клиента.

Javascript:

$("input[name=optionMedia]").click(function(e) { 
    if ($(e.currentTarget).prop('checked')) { 
     $(e.currentTarget).prop('checked', false); 
    } 
}); 

Html:

<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/> 
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" /> 
+4

Если вы хотите, чтобы снять то использовать 'checbox' вместо' тип radio' является не предназначенные для этой цели. –

+1

В дополнение к комментарию Закарии, радиолюбители всегда должны иметь ровно 1 проверенный. Не 0, а не 2. Если вы хотите, чтобы иметь возможность иметь 0, вы должны использовать флажки, и если вы хотите снять отметку с других, когда они отмечены, то это делается через javascript. –

+0

Флажки не являются опцией. Я должен использовать переключатели по запросу клиента. – dpasie2

ответ

0

Это происходит потому, что проверяется это свойство. Если его там, то это правда, если это не так. Следовательно, вы либо должны переключиться на флажок или использовать

$("..").removeProp('checked')

0

Использование флажок для включения/выключения лучше, чем радио-кнопки. Но если вы хотите использовать переключатель, вам нужно проверить, проверено ли радио, скопировать его и удалить проверенный атрибут скопированного элемента, а затем вставить его после целевого радио. В конце удалите оригинальное радио.

$(document).on("mousedown", "input[name=optionMedia]", function(e) { 
 
    if (this.checked) 
 
    $(this).clone().prop('checked', false).insertAfter(this).end().remove();  
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/> 
 
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />

1

Вы можете сделать это, как этот

$('input.bigSizeInput').mouseup(function() { 
 
    if ($(this).is(':checked')) { 
 
    setTimeout(function() { 
 
     $('input.bigSizeInput:checked').prop('checked', false); 
 
    }, 1) 
 
    } 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1" /> 
 
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />

Смежные вопросы