JQuery позволяет проверять только одну кнопку

Question

У меня есть 5 кнопок, которые пользователь может проверить. на мгновение код, позволяющий пользователю проверять более 1 кнопки. я хочу, скоро они нажмут вторую кнопку, появится диалоговое окно с предупреждением, хотят ли они выполнять процесс или нет, если да, это добавит checked class к выбранной кнопке .

<form class="table_book">
<input id="block_book" type="button" value="first" class="checked">
<input id="block_book" type="button" value="second">
<input id="block_book" type="button" value="third">
<input id="block_book" type="button" value="fourth">
<input id="block_book" type="button" value="fifth">
</form>

$("input#block_book").live('click',function(){
  if($(".table_book #block_book").hasClass("checked").length > 1) {
     if(var conf = confirm('Are you sure want to select the button?'))
        // ajax process
     } else {
       // remove unchecked class 
     }
  }
})

Answer 1

Первая задача - преобразовать входные данные для использования общего класса вместо идентификатора

HTML

<form class="table_book">
    <input class="block_book" type="button" value="first">
    <input class="block_book" type="button" value="second">
    <input class="block_book" type="button" value="third">
    <input class="block_book" type="button" value="fourth">
    <input class="block_book" type="button" value="fifth">
</form>

Если я правильно понял ваши требования, тогда этот код должен работать.Первая кнопка может быть выбрана свободно.Нажатие второй кнопки вызовет запрос на подтверждение изменения.

jQ

$(function() {
    $("input.block_book").live('click', function() {
        var setClass = true;
        if ($("input.block_book.checked").length > 0)
            setClass = confirm('Are you sure want to select the button?');

        if (setClass) {
            // ajax process 
            $("input.block_book").removeClass("checked")
            $(this).addClass("checked")
        }
    });
});

Answer 2

Я не совсем понимаю логику, которую вы пытаетесь применить здесь (например, определяет ли их ответ на вопрос «Вы уверены?», Можно ли отметить более одного флажка?

Кроме того, я не уверен, что вы пытаетесь определить с помощью «если» - hasClass возвращает true или false, это не селектор.

Но чтобы ответить на фактический заголовок вашего вопроса, как проверить только один, просто сделайте это в событии щелчка. Примените необходимую логику в зависимости от ситуации.

 $(".table_book #block_book.checked").removeClass("checked");
 $(this).addClass("checked");

http://jsfiddle.net/t3FNy/1/

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

Answer 3

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

После этого измените также первую строку на $("form .table_book").find(":input[type='button']").live('click',function() {