Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Mad1k
0 / 0 / 0
Регистрация: 22.05.2016
Сообщений: 53
1

Отключить чекбоксы во втором фильтре в зависимости от выбора в первом

04.04.2018, 11:35. Просмотров 370. Ответов 16
Метки нет (Все метки)

Есть два фильтра товаров: бренд и категория. В каждом по три чекбокса. Когда выбираем категорию, сразу же срабатывает второй фильтр Бренд который ставит значение disabled чекбоксу который не вернёт ни какого результата. И наоборот, если первым выбрали бренд, то сработал категория и отключил свои чекбоксы. Просьба реализовать небольшой пример или найти сайт с таким фильтром.
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.04.2018, 11:35
Ответы с готовыми решениями:

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

Активность определенных ComboBox в зависимости от выбора в первом
Стоит такая задача. У меня есть 3 элемента ComboBox. Нужно сделать так чтобы, Если в ComboBox1...

Заполнение второго Combobox в зависимости от выбора в первом
Привет всем. Я пишу маленькую программку типа справочника, есть два combobox -а. №1 Страны №2...

Формирование второго комбобокса в зависимости от выбора в первом
Здравствуйте. Пишу приложение для работы с базой данных MY SQL. Проблема в следующем, на форме...

Заполнение второго ComboBox в зависимости от выбора в первом
Кто подскажет как сделать... незнаю как это сказать... Вообщем есть 3 ComboBox'а В первом к...

16
atanov
464 / 393 / 144
Регистрация: 26.05.2016
Сообщений: 2,255
04.04.2018, 12:10 2
Mad1k, например так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div>
<input type = "checkbox" id = "category">Категория
<input type = "checkbox" id = "cat1" disabled>
<input type = "checkbox" id = "cat2" disabled>
<input type = "checkbox" id = "cat3" disabled>
<br>
<input type = "checkbox" id = "brand">Бренд
<input type = "checkbox" id = "br1" disabled>
<input type = "checkbox" id = "br2" disabled>
<input type = "checkbox" id = "br3" disabled>
</div>
<script src = "24.js" type = "text/javascript"></script>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
document.getElementById('category').onclick = makeDisabled;
document.getElementById('brand').onclick = makeDisabled;
function makeDisabled(){
    if (document.getElementById('category').checked == true){
        document.getElementById('br1').disabled = true;
        document.getElementById('br2').disabled = true;
        document.getElementById('br3').disabled = true;
        document.getElementById('cat1').disabled = false;
        document.getElementById('cat2').disabled = false;
        document.getElementById('cat3').disabled = false;
    }else{
        if (document.getElementById('brand').checked == true){
        document.getElementById('br1').disabled = false;
        document.getElementById('br2').disabled = false;
        document.getElementById('br3').disabled = false;
        document.getElementById('cat1').disabled = true;
        document.getElementById('cat2').disabled = true;
        document.getElementById('cat3').disabled = true;
    }else{return;}}
}
0
Mad1k
0 / 0 / 0
Регистрация: 22.05.2016
Сообщений: 53
04.04.2018, 12:25  [ТС] 3
atanov, не то. Два фильтра - оба включены. Выбираем первый чек в первом фильтре, тут же ajax запрос на вывод результатов и вместе с ним прогон второго фильтра по этим результатам. Если какой-либо чек бокс не вернёт результатов из тех что мы отсортировали первым фильтром ему нужно установить prop({disabled:true}). То есть сортировка как бы по порядку. Выбрали первый, потом на показывают какие чекбоксы нам доступны во втором.
0
atanov
464 / 393 / 144
Регистрация: 26.05.2016
Сообщений: 2,255
04.04.2018, 12:30 4
Mad1k, честно говоря вообще не понял Ваше последнее объяснение.
0
04.04.2018, 12:30
Mad1k
0 / 0 / 0
Регистрация: 22.05.2016
Сообщений: 53
04.04.2018, 12:38  [ТС] 5
atanov, Вот смотрите выбрали первый пункт в первом и сработал второй фильтр который проверил себя, узнал что если в нём выберут второй пункт, то он ничего не вернёт и заранее его выключил.
0
Миниатюры
Отключить чекбоксы во втором фильтре в зависимости от выбора в первом  
atanov
464 / 393 / 144
Регистрация: 26.05.2016
Сообщений: 2,255
04.04.2018, 13:17 6
Mad1k, если чекнут cat1, то br2 должен быть выключен. Далее если чекнут cat2 =>..., если чекнут cat3 =>..., если чекнут br1 =>... и так далее распишите ВСЕ условия.
0
j2FunOnly
Модератор
Эксперт JS
1288 / 1115 / 597
Регистрация: 05.06.2015
Сообщений: 2,454
04.04.2018, 13:19 7
atanov, та не, там же ответ от сервера приходит, и если в ответе нету таких брендов, то выключить соответствующие чекбоксы и наоборот
0
atanov
464 / 393 / 144
Регистрация: 26.05.2016
Сообщений: 2,255
04.04.2018, 13:21 8
j2FunOnly, ну если так, я в конец запутался.
0
Mad1k
0 / 0 / 0
Регистрация: 22.05.2016
Сообщений: 53
04.04.2018, 13:30  [ТС] 9
atanov, смотрите ещё. Выбираем Cat1 и br1 - возвращается результат. Выбираем Cat1 и br2 - результатов нет. Следовательно второй фильтр это должен был предусмотреть и отключить br2. Выбираем cat2 - тот же проход, если при выборе cat2 какой-либо бренд не вернёт результат он тоже должен отключиться.

Добавлено через 3 минуты
j2FunOnly, вот Вы в точку правильно сказали, вот только бы реализацию сделать, хотябы на статических данных.
0
atanov
464 / 393 / 144
Регистрация: 26.05.2016
Сообщений: 2,255
04.04.2018, 13:31 10
Mad1k, стало быть j2FunOnly, прав? Результат возвращает сервер? Тогда анализируйте, что возвращает Ваш сервер и ставьте элементу .disabled = true;, если результата нет или он NULL или undefined и т.д.
0
Mad1k
0 / 0 / 0
Регистрация: 22.05.2016
Сообщений: 53
04.04.2018, 14:34  [ТС] 11
atanov, да, но мне реализация нужна хотябы на статических данных без ajax

Добавлено через 52 минуты
atanov, помогите реализовать, два фильтра и данные просто показывать jquery. Добавить для фильтров атрибуты в div там data-cat="cat1" data-br="br1". выбираем категорию, сортируем div и запоминаем как нибудь в массив, затем выбираем чек во втором фильтре и сортируем тот массив по бренду. При этом в каком-то месте нужно заранее проверить для каких брендов нам доступна сортировка, после того как мы выбрали категорию.
0
atanov
464 / 393 / 144
Регистрация: 26.05.2016
Сообщений: 2,255
04.04.2018, 16:22 12
Mad1k, так трудно понять, чем помочь. Есть хоть какие-то наброски?
0
Mad1k
0 / 0 / 0
Регистрация: 22.05.2016
Сообщений: 53
04.04.2018, 17:00  [ТС] 13
atanov, Вот сейчас точно всё поймёте. На скриншоте. Если выбрали категорию 1, у нас остаётся отображаться 2 синих Item и вместе с этим во втором фильтре brand 1 и 4 становятся disabled, и нам доступны только 2 - 2 и 3, выбираем 3 и нам показывается только Category-1 brand-3
0
Миниатюры
Отключить чекбоксы во втором фильтре в зависимости от выбора в первом  
Вложения
Тип файла: zip index.zip (1,008 байт, 2 просмотров)
atanov
464 / 393 / 144
Регистрация: 26.05.2016
Сообщений: 2,255
04.04.2018, 17:40 14
Mad1k, Нда, строение молекул кажется проще Мне кажется я Вас всё-равно до конца не понял. ну вот чем богаты, как говорится:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<meta http-equiv = "Content-Type" content = "text/html" charset = "utf-8">
<div id = "div1">
Категория
<input type = "checkbox" id = "cat1">
<input type = "checkbox" id = "cat2">
<input type = "checkbox" id = "cat3">
<input type = "checkbox" id = "cat4">
<br>
Бренд
<input type = "checkbox" id = "br1">
<input type = "checkbox" id = "br2">
<input type = "checkbox" id = "br3">
<input type = "checkbox" id = "br4">
</div>
<script src = "24.js" type = "text/javascript"></script>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
document.getElementById('div1').onclick = makeDisabled;
function makeDisabled(){
    if (document.getElementById('cat1').checked == true){
        document.getElementById('br1').disabled = true;
        document.getElementById('br2').disabled = false;
        document.getElementById('br3').disabled = false;
        document.getElementById('br4').disabled = true;
    }else{}
    
    if (document.getElementById('cat2').checked == true){
        document.getElementById('br1').disabled = true;
        document.getElementById('br2').disabled = true;
        document.getElementById('br3').disabled = false;
        document.getElementById('br4').disabled = false;
    }else{}
    
    if (document.getElementById('cat3').checked == true){
        document.getElementById('br1').disabled = true;
        document.getElementById('br2').disabled = false;
        document.getElementById('br3').disabled = true;
        document.getElementById('br4').disabled = false;
    }else{}
    
    if (document.getElementById('cat4').checked == true){
        document.getElementById('br1').disabled = false;
        document.getElementById('br2').disabled = true;
        document.getElementById('br3').disabled = true;
        document.getElementById('br4').disabled = false;
    }else{}
    
if(document.getElementById('cat1').checked==false&&document.getElementById('cat2').checked==false&&document.getElementById('cat3').checked==false&&document.getElementById('cat4').checked==false){
        document.getElementById('br1').disabled = false;
        document.getElementById('br2').disabled = false;
        document.getElementById('br3').disabled = false;
        document.getElementById('br4').disabled = false;
    }else{}
    
}
0
Mad1k
0 / 0 / 0
Регистрация: 22.05.2016
Сообщений: 53
04.04.2018, 23:04  [ТС] 15
atanov, Вы понимаете в js хорошо. Вот только что если в фильтре будет 100 категорий, и 100 брендов. Как вижу я, создаётся массив из первого фильтра, т.е. массив чекбоксов category-item - к ниму по классу как в моём файле можно привязать data-item. Как только мы выбираем любой чекбокс из первого - js показывает data-item, где класс category-N соответствует выбранному чекбоксу category-item[i].checked

Добавлено через 5 часов 4 минуты
atanov, Продолжение тут http://www.cyberforum.ru/javascript-...l#post12280258
0
atanov
464 / 393 / 144
Регистрация: 26.05.2016
Сообщений: 2,255
05.04.2018, 10:32 16
Mad1k, у diadiavova получилось?
0
Mad1k
0 / 0 / 0
Регистрация: 22.05.2016
Сообщений: 53
05.04.2018, 20:12  [ТС] 17
atanov, да, только ещё хотелось бы чтобы в обе стороны работало правильно
0
05.04.2018, 20:12
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.04.2018, 20:12

Заполнить второй ComboBox значениями в зависимости от выбора в первом
Вот к примеру в контакте &quot;поиск&quot;, выбираешь страну и в след comboBoxe выбираешь город этой страны....

Автоподставление данных в выпадающий список в зависимости от выбора в первом
Здравствуйте, уважаем форумчане, очень прошу помочь с такой задачей. У меня на листе2 указаны...

Как задать в подчиненной форме значения второго столбца в зависимости от выбора в первом
Есть две таблицы Первая - группа патологии 1- живот 2 - сосуды 3 - ЖКК и т.д. Вторая -...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.