Проверка jQuery на флажках

Question

У меня есть страница с тремя флажками, и мне нужно выполнить некоторую проверку подлинности jQuery. Ниже приведена копия трех флажков.

То, что я хотел бы сделать, это установить его так, чтобы пользователь мог выбрать только один из первых двух флажков (если они выбирают первый, сделать второй недоступным и наоборот). Затем, если пользователь выбрал один из первых 2 коробки, то они могут выбрать 3-й флажок.

ли кто-нибудь может помочь с этим?

<input type="checkbox" name="upselldigitaldisplay" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselldigitaldisplay" value="1"> 

<input type="checkbox" name="upsellenhancedclassificationad" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upsellenhancedclassificationad" value="1"> 

<input type="checkbox" name="upselljnpriority" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselljnpriority" value="1"> 

Answer 1

Вот решение, я взбитые на JSFiddle http://jsfiddle.net/wfjGm/

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

$(document).ready(function(){ 

$('input:checkbox:eq(2)').attr("disabled", true); // Step 1 

    $('input:checkbox').click(function(){ // Step 2 

      if (($('input:checkbox:eq(0)').is(':checked')) || ($('input:checkbox:eq(1)').is(':checked'))){ // Step 3 
          $('input:checkbox:eq(2)').attr("disabled", false); // Step 4   
      } 


      else {  
       $('input:checkbox:eq(2)').attr("disabled", true); //Step 5 
       } 

    }); 

}); 

Шаг 1) Сделайте 3-й флажок отключен документ готовности (: эк использует индекс 0, поэтому третий флажок элемент 2)
Шаг 2) Запустить функцию на событие щелчка каждый раз, когда флажок щелчок
Шаг 3) Проверка Если отмечены первые или два флажка или нет, и установите флажок 3, если они есть.
Шаг 4) Шаг 5 - оператор возврата назад, чтобы отключить этот флажок, если пользователь не выбирает один из первых двух.


БЫСТРЫЙ EDIT Если вы хотите, чтобы убедиться, что третий флажок также снят, когда он выключен, если первые два не выбраны, то изменить еще строку в шаге 5 до этого ...

$('input:checkbox:eq(2)').attr("disabled", true).attr("checked", false); } 

Answer 2

Я сделал для вас решение, где я cache the selectors, а также использовать .prop ради демонстрации.

$(function() { 
    var $options = $('.option'); 
    var $priority = $('#upselljnpriority'); 

    function uncheckOtherOptions(domElem) { 
     if (domElem.checked) { 
      $options.not(domElem).prop('checked', false); 
     } 
    } 

    function togglePriorityAvailability() { 
     if ($options.is(':checked')) { 
      $priority.prop('disabled', false); 
     } else { 
      $priority.prop('disabled', true); 
      $priority.prop('checked', false); 
     } 
    } 

    $options.click(function() { 
     uncheckOtherOptions(this); 
     togglePriorityAvailability(); 
    }); 

    togglePriorityAvailability(); 
}); 

Обратите внимание, что я добавил option класс первых двух вариантов. Это позволяет мне делать очень быстрые и чистые селекторы. Также это хорошая практика, потому что ваш html-код расширяется с большим количеством параметров без изменения JavaScript. Если это не требуется, вы можете использовать

var $options = $('#upselldigitaldisplay, #upsellenhancedclassificationad'); 

Обратите внимание, что я рассчитал $options и $priority вне обработчика событий в начале и никогда! Таким образом я кэшировал свои вычисления для последующего использования. Это повышает производительность.

Обратите внимание, что я использовал .prop для управления свойствами, так как у меня нет возможности изменять атрибуты, просто свойства.

Обратите внимание на строку $options.not(domElem).prop('checked', false);. Я использовал .not() с элементом DOM в качестве его ввода. Это означает, что исходный селектор минус данный элемент DOM.

Обратите внимание, что я использовал именованные функции (uncheckOtherOptions и togglePriorityAvailability). Они мне нравятся. Они дают немного больше информации о том, что происходит и что должно произойти. Кроме того, сделав togglePriorityAvailability отдельной функцией, я смог ее повторно использовать (обратите внимание на последнюю строку, которая устанавливает последний флажок в правильное состояние сразу на pageload).

Я также создал jsFiddle demo, чтобы проверить это.

Answer 3

Я лично предлагаю следующее, хотя это требует некоторых изменений в HTML (после Jquery):

var radios = $('input[type="checkbox"].ap_upsellstandard'); 
radios.change(function() { 
    var self = this, 
     $self = $(self); 
    if ($self.siblings().length) { 
     // one of the first two: 
     $self.siblings('input').prop('disabled', self.checked); 
     $self.closest('fieldset').next('fieldset').toggle(self.checked); 
    } 
}).last().parent().hide(); 

JS Fiddle demo.

Измененный HTML:

<fieldset> 
    <legend>Select <strong>one</strong> of the following:</legend> 
    <input type="checkbox" name="upselldigitaldisplay" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselldigitaldisplay" value="1" /> 
    <input type="checkbox" name="upsellenhancedclassificationad" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upsellenhancedclassificationad" value="1" /> 
</fieldset> 
<fieldset> 
    <input type="checkbox" name="upselljnpriority" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselljnpriority" value="1" /> 
</fieldset> 

Ссылки:

• change().
• closest().
• hide().
• last().
• next().
• parent().
• prop().
• siblings().
• toggle().