Разрешить только один установлен флажок, когда определенная кнопка нажата

Question

У меня есть следующий код:

$("input.edit_user").click(function() { 
    var theCheckboxes = $("input[type='checkbox']"); 
    if (theCheckboxes.filter(":checked").length > 1) 
     $(this).removeAttr("checked"); 
     alert("Please selected one user at a time for editing."); 
}); 
. 
. 
. 
<tr> 
    <td><input type="checkbox" name="user_id[]" value="1"></td> 
    <td><input type="checkbox" name="user_id[]" value="2"></td> 
    <td><input type="checkbox" name="user_id[]" value="3"></td> 
</tr> 
. 
. 
. 
<input type="submit" name="submit" value="Edit Selected User" class="edit_user"> 

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

Однако, когда пользователь выбирает флажок для редактирования, мне нужно предупредить их, что им разрешено только один флажок.

Я думаю, что у меня есть правильная идея с моим кодом, но я ошибаюсь, потому что он не работает и просто продолжает обрабатывать страницу в обычном режиме.

Предложения?

---

UPDATE от выбранного решения и почему

Для жизнеспособных решений ниже после того, как я добавил:

$(document).ready(function() { 

в моем рабочем примере, они начали работать. Я выбрал ответ, который я сделал, потому что после того, как была добавлена ​​выше линия, все, что мне нужно было

return false; 

линия (и правильные скобки на внутреннем, если заявлении), чтобы остановить страницу от выполнения того, что осталось.

Благодарим вас за помощь в решении этой проблемы!

Answer 1

Я думаю, что вы должны вернуться false:

$("input.edit_user").click(function() { 
    var theCheckboxes = $("input[type='checkbox']"); 
    if (theCheckboxes.filter(":checked").length > 1) { 
     $(this).removeAttr("checked"); 
     alert("Please selected one user at a time for editing."); 

     return false; 
    } 
}); 

Answer 2

Ваш селектор ошибочен. Вы используете $("input.edit_user"), но входы в вашем html не имеют класса edit_user.

Редактировать:

Извините, не смотрел достаточно внимательно. Вот что вам нужно:

$('input[type="submit"]').on('click', function() { 
    var $checkBoxes = $('input[type="checkbox"]'); 
    var checkCount = 0; 

    $checkBoxes.each(function(){ if(this.checked) checkCount++; }); 

    if(checkCount > 1) { 
     $checkBoxes.removeAttr('checked'); 
     alert('Please selected one user at a time for editing.'); 
    } 
}); 

(fiddle)

Answer 3

Несколько вещей здесь:

1. Вы не останавливая click от отправка данных, когда условие не выполняется. Вы можете сделать это, например, с помощью return false;.
2. if В настоящее время филиал имеет только одну строку. Отсутствуют фигурные скобки?
3. Флажок не обязательно должен иметь атрибут checked. Например, у них их нет в вашем случае. Однако какие изменения при щелчке по галочке - это значение его свойства checked. К этому следует обратиться с помощью метода prop.
4. if не изменяет область действия, поэтому $(this) относится к кнопке, а не к флажку.

В общем, исправленный скрипт:

$("input.edit_user").click(function() { 
    var theCheckboxes = $("input[type='checkbox']"); 
    if (theCheckboxes.filter(":checked").length > 1) { 
     theCheckboxes.prop("checked", false); 
     alert("Please selected one user at a time for editing."); 
     return false; 
    } 
}); 

Answer 4

Вы используете неправильные селекторы. Вот код JQuery работает для вашего случая:

$(".edit_user").click(function() { 
    var $checkboxes = $("input[type='checkbox']"); 
    if ($("input[type='checkbox']:checked").length > 1) { 
    $("input[type='checkbox']").removeAttr("checked"); 
    alert("Please select one user at a time for editing."); 
    } 
}); 

Вот рабочая скрипку: http://jsfiddle.net/639yH/