Разрешить только один флажок при нажатии определенной кнопки

0

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

$("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">

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

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

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

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

ОБНОВЛЕНИЕ на выбранное решение и почему

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

$(document).ready(function() {

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

return false;

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

Спасибо всем за вашу помощь в решении этого!

  • 1
    Извините, я не понимаю, почему вы не используете переключатели вместо флажков.
  • 0
    @ j08691, потому что если условие x истинно, можно проверить более одного.
Показать ещё 2 комментария
Теги:
checkbox

4 ответа

2
Лучший ответ

Я думаю, вы должны вернуть 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;
    }
});
Поделиться
1

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

  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;
    }
});
Поделиться
  • 0
    Большое спасибо за шаг за шагом. Я определенно пропустил оценку некоторых очевидных вещей там. Кроме того, это работает на скрипке, но не работает в моем коде, даже с прямым вырезанием / вставкой. Идеи, что это может быть не так?
  • 0
    @ Язмин, не могли бы вы определить «не работает в моем коде»? Вы получаете исключения, или страница работает не так, как вы хотите, и т. Д.?
Показать ещё 1 комментарий
1

Вы используете неправильные селекторы. Вот код 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/

Поделиться
1

Ваш селектор ошибочен. Вы используете $("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.' );
    }
});

(скрипка)

Поделиться
  • 0
    Спасибо за ответ, но у моей кнопки отправки в конце кода есть этот класс, и я хочу, чтобы код срабатывал только при нажатии этой конкретной кнопки.
  • 0
    Спасибо, это определенно работает в скрипте, но не работает в моем коде, даже с прямым вырезанием / вставкой. Идеи, что это может быть не так?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню