Снимите отметку с другого флажка только этот div

Question

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

Как я могу выбрать только 1 набор за раз? Когда у меня есть несколько наборов флажков, скрипт рассматривает их как одну группу.

http://jsfiddle.net/infatti/XpTDK/

<div class="controls check-yes-no"> 
    <label class="checkbox inline"> 
     <input type="checkbox" value="option1" name="setupStewardshipReviewApproveReject"> Yes 
    </label> 
    <label class="checkbox inline"> 
     <input type="checkbox" value="option2" name="setupStewardshipReviewApproveReject"> No 
    </label> 
    </div> 

    <div class="controls check-yes-no"> 
    <label class="checkbox inline"> 
     <input type="checkbox" value="option1" name="setupStewardshipReviewApproveReject"> Yes 
    </label> 
    <label class="checkbox inline"> 
     <input type="checkbox" value="option2" name="setupStewardshipReviewApproveReject"> No 
    </label> 
    </div> 

$('.check-yes-no input:checkbox').click(function() { 
    $(".check-yes-no input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked 
}); 

Answer 1

Технически это не большое изменение:

$('.check-yes-no input:checkbox').click(function() { 
    $(this).closest('.check-yes-no').find("input[type='checkbox']") 
     .not(this).prop("checked", false); 
}); 

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

Answer 2

Вы уверены, что не ищете что-то в этом роде?

http://jsfiddle.net/XpTDK/1/

Несовершеннолетний редактировать в код:

<div class="controls check-yes-no"> 
    <label class="checkbox inline"> 
     <input type="radio" value="option1" name="name1"> Yes 
    </label> 
    <label class="checkbox inline"> 
     <input type="radio" value="option2" name="name1"> No 
    </label> 
    </div> 

    <div class="controls check-yes-no"> 
    <label class="checkbox inline"> 
     <input type="radio" value="option1" name="name2"> Yes 
    </label> 
    <label class="checkbox inline"> 
     <input type="radio" value="option2" name="name2"> No 
    </label> 
    </div> 

---

Вот стандартные определения для элементов формы:

кнопки

• Радио предназначены для списков два или более взаимоисключающих i стем. Другими словами, вы можете выбрать только один из нескольких параметров , например, вопрос с несколькими вариантами выбора.

  • Флажки имеют двоичный выбор - включение или выключение опции как истинного/ложного вопроса.
    • Группы флажков позволяют посетителю выбирать любое количество элементов из списка.
    • Отдельные флажки для автономных вопросов да/нет.

Эти определения достаточно ясны, но общие ошибки продолжают появляться на веб-сайтах. Рассмотрим эти примеры, взятые из некоторых недавний серфинг:

• Вопрос следуют две кнопки радио меченых Да и Нет, что предлагает два взаимоисключающих варианта, но один флажок будет делать то же самое, гораздо более эффективно, ,

• Список нескольких флажков, которым предшествует инструкция по проверке только одного элемента. Если разрешен только один выбор, используйте переключатели вместо флажков.

• Список флажков с инструкциями по проверке всех применимых. Эта команда избыточна, так как возможность проверки нескольких опций подразумевается при использовании флажков вместо радио кнопок.По-видимому, веб-строитель считал, что эта инструкция была , чтобы уточнить, что список является примером нормального использования флажков . Это указывает на путаницу, вызванную распространенным неправильным использованием флажков , где допускается только один выбор.

• Два отдельных вопроса, связанных и противоречащих друг другу, каждый со своим автономным флажком. Связанные варианты должны быть сгруппированы вместе с переключателями для ответов, если выбор взаимно эксклюзивный. Еще лучше, объедините вопросы в один выбор с помощью одного флажка .

Источник: http://www.techrepublic.com/article/proper-usage-of-check-boxes-and-radio-buttons/5418918