Ограничить флажки с помощью jquery на основе проверенных переключателей

Итак, у меня есть эта проблема с некоторыми флажками. Прежде всего позвольте мне рассказать вам о самом «проекте». Это веб-форма, пользователь должен ее заполнить и проверить некоторые флажки и переключатели в зависимости от того, что он хотел бы купить. Первая из них - 2 радиопульта, пронумерованные 1 и 2, и представляют собой количество продукта, который он хочет купить. Рядом с ними около 5 флажков, которые представляют цвет продукта, неважно, сколько из них, вещь ... я хочу, когда пользователь выбирает 1 на переключателях, только 1 флажок активен, если он выбирает 2, тогда только 2 флажка будут доступны для проверки. Так ... может кто-нибудь мне помочь? Я думал о jQuery, но я не знаю ...Ограничить флажки с помощью jquery на основе проверенных переключателей

Есть два divs, первый div с id, скажем, #radioButtons имеет 2 переключателя, а второй div имеет остальные флажки.

источник

2012-06-02 aaa

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

источник

2012-06-02 20:31:39 secretformula

Вы не дают никакой разметки в вашем посте, так что я думаю, что-то вроде этого:

HTML

<div id="radioButtons"> 
    <input type="radio" name="quantity" id="radio1"> 
    <input type="radio" name="quantity" id="radio2"> 
</div> 
<div class="checkBoxes"> 
    Color 1:<input type="checkbox" name="color" disabled="disabled"> 
    Color 2:<input type="checkbox" name="color" disabled="disabled"> 
    Color 3:<input type="checkbox" name="color" disabled="disabled"> 
    Color 4:<input type="checkbox" name="color" disabled="disabled"> 
    Color 5:<input type="checkbox" name="color" disabled="disabled"> 
</div>

JQuery

$('#radio1').on('change', function() { 
    $('.checkBoxes :checkbox').prop('disabled', true); 
    $(':checkbox:eq(0)').prop('disabled', false); 
}); 

$('#radio2').on('change', function() { 
    $('.checkBoxes :checkbox').prop('disabled', true); 
    $(':checkbox:eq(0), :checkbox:eq(1)').prop('disabled', false); 
});

Sample workout

источник

2012-06-02 20:38:39 thecodeparadox

Вы не поняли, что есть 2 радиостанции, но можно выбрать только один, и если выбрано первое 1, можно выбрать только 1 флажок. Если выбран второй переключатель, для выбора доступны 2 флажка. HTML Markup выглядит следующим образом: '

<- Radiobuttons ->

<- Флажки ->' – aaa

@Hiskie увидеть мой ответ обновления и демо – thecodeparadox

Пожалуйста, смотрите Sample

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

EDIT:

Я обновляю скрипку, что вы дали. Пожалуйста, обратите внимание Update Fiddle

источник

2012-06-02 20:57:14 raddykrish

HTTP: // jsfiddle. net/vncatalin/C6SpM/6/так будет выглядеть разметка html, если пользователь выбирает первый переключатель, тогда только один флажок должен быть доступен для выбора, если пользователь выбирает другую радиостанцию, тогда 2 флажка будут доступны для выберите, но все они видны с самого начала, я не хочу, чтобы они были динамически созданы. – aaa

Я проверил его, и я ответил выше с проблемой, у меня есть – aaa

@Hiskie. См. Мое редактирование выше. Я только что обновил скрипку, которую вы дали. – raddykrish

Мы можем использовать источник HTML настоящий, где возникла проблема.

EDIT:

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

Зачем вам это нужно?
Что вы хотите, чтобы ваши пользователи выбрали?

Существует множество возможностей выбора, известный пример будет использовать тип iPad на apple.com. Но самое главное - предоставить пользователям пользовательские интерфейсы, которые очень легко понять и отличное чувство для использования.

источник

2012-06-02 23:24:17

Ограничить флажки с помощью jquery на основе проверенных переключателей

ответ

Смежные вопросы