Как разрешить проверять только один флажок из четырех в UserControl?

Question

Я создал User Control с 4 флажками (серверным управлением). Я хочу разрешить проверять только один флажок из четырех.

Пользовательский элемент управления загружается на страницу динамически. На странице может быть несколько одинаковых UserConrol.

Как это сделать, используя jQuery или Javascript?

Answer 1

Используйте Radio Button Control. Флажки предназначены для нескольких вариантов, в то время как радио кнопки предназначены для одного выбора. Затем с помощью кнопок Radio вы можете указать GroupName для этих элементов управления, чтобы ограничить выбор одним элементом.

Answer 2

Вы можете дать все флажки в группе того же класса и сделать что-то вроде этого, чтобы снять их все с помощью JQuery, во время проверки или убрав тот, который был щелкнул:

$('.checkbox').click(function{ 
    // save the original checked state of the one we're clicking: 
    var checked = $(this).attr('checked'); 
    $('.checkbox').attr('checked', false); // uncheck all of the boxes 
    $(this).attr('checked', !checked); // invert the original state 
}); 

Но лучший выбор вероятно, будет использовать переключатель с переключателем с «ни одним из вышеперечисленных» вариантов. Таким образом, вы можете сделать валидацию (они вообще ответили на вопрос?)

Answer 3

Я думаю, что это должно быть: $ (this) .attr ('checked', checked);

Answer 4

Имел подобный вопрос, работая на cakephp. Cakephp обертывает флажки в DIV. Мое решение было ясным флажком с использованием каждого цикла, а затем установите флажок для пользователя.

СЛУЧАЙ:

<div class="unique"> <input type='checkbox' name='mygroup1' value='1' class=''>one</div>  
<div class="unique"> <input type='checkbox' name='mygroup2' value='2' class=''>two</div>  
<div class="unique"> <input type='checkbox' name='mygroup3' value='3' class=''>three</div> 

$('.unique').click(function() { 
    $('.unique').find('input').each(function(){ 
     $(this).attr('checked', false); 
    }); 
    $(this).find('input:first').attr('checked', true); 
});