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

@Mad1k · Регистрация: 22.05.2016

Есть два фильтра товаров: бренд и категория. В каждом по три чекбокса. Когда выбираем категорию, сразу же срабатывает второй фильтр Бренд который ставит значение disabled чекбоксу который не вернёт ни какого результата. И наоборот, если первым выбрали бренд, то сработал категория и отключил свои чекбоксы. Просьба реализовать небольшой пример или найти сайт с таким фильтром.

@atanov · 04.04.2018, 12:10

Mad1k, например так:

HTML5

<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

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;}}
}

@Mad1k · 04.04.2018, 12:25 **[ТС]**

atanov, не то. Два фильтра - оба включены. Выбираем первый чек в первом фильтре, тут же ajax запрос на вывод результатов и вместе с ним прогон второго фильтра по этим результатам. Если какой-либо чек бокс не вернёт результатов из тех что мы отсортировали первым фильтром ему нужно установить prop({disabled:true}). То есть сортировка как бы по порядку. Выбрали первый, потом на показывают какие чекбоксы нам доступны во втором.

@atanov · 04.04.2018, 12:30

Mad1k, честно говоря вообще не понял Ваше последнее объяснение.

@Mad1k · 04.04.2018, 12:38 **[ТС]**

atanov, Вот смотрите выбрали первый пункт в первом и сработал второй фильтр который проверил себя, узнал что если в нём выберут второй пункт, то он ничего не вернёт и заранее его выключил.

@atanov · 04.04.2018, 13:17

Mad1k, если чекнут cat1, то br2 должен быть выключен. Далее если чекнут cat2 =>..., если чекнут cat3 =>..., если чекнут br1 =>... и так далее распишите ВСЕ условия.

@j2FunOnly · 04.04.2018, 13:19

atanov, та не, там же ответ от сервера приходит, и если в ответе нету таких брендов, то выключить соответствующие чекбоксы и наоборот

@atanov · 04.04.2018, 13:21

j2FunOnly, ну если так, я в конец запутался.

@Mad1k · 04.04.2018, 13:30 **[ТС]**

atanov, смотрите ещё. Выбираем Cat1 и br1 - возвращается результат. Выбираем Cat1 и br2 - результатов нет. Следовательно второй фильтр это должен был предусмотреть и отключить br2. Выбираем cat2 - тот же проход, если при выборе cat2 какой-либо бренд не вернёт результат он тоже должен отключиться.

Добавлено через 3 минуты
j2FunOnly, вот Вы в точку правильно сказали, вот только бы реализацию сделать, хотябы на статических данных.

@atanov · 04.04.2018, 13:31

Mad1k, стало быть j2FunOnly, прав? Результат возвращает сервер? Тогда анализируйте, что возвращает Ваш сервер и ставьте элементу .disabled = true;, если результата нет или он NULL или undefined и т.д.

@Mad1k · 04.04.2018, 14:34 **[ТС]**

atanov, да, но мне реализация нужна хотябы на статических данных без ajax

Добавлено через 52 минуты
atanov, помогите реализовать, два фильтра и данные просто показывать jquery. Добавить для фильтров атрибуты в div там data-cat="cat1" data-br="br1". выбираем категорию, сортируем div и запоминаем как нибудь в массив, затем выбираем чек во втором фильтре и сортируем тот массив по бренду. При этом в каком-то месте нужно заранее проверить для каких брендов нам доступна сортировка, после того как мы выбрали категорию.

@atanov · 04.04.2018, 16:22

Mad1k, так трудно понять, чем помочь. Есть хоть какие-то наброски?

@Mad1k · 04.04.2018, 17:00 **[ТС]**

atanov, Вот сейчас точно всё поймёте. На скриншоте. Если выбрали категорию 1, у нас остаётся отображаться 2 синих Item и вместе с этим во втором фильтре brand 1 и 4 становятся disabled, и нам доступны только 2 - 2 и 3, выбираем 3 и нам показывается только Category-1 brand-3

@atanov · 04.04.2018, 17:40

Mad1k, Нда, строение молекул кажется проще

Мне кажется я Вас всё-равно до конца не понял. ну вот чем богаты, как говорится:

HTML5

<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

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{}
    
}

@Mad1k · 04.04.2018, 23:04 **[ТС]**

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

@atanov · 05.04.2018, 10:32

Mad1k, у diadiavova получилось?

@Mad1k · 05.04.2018, 20:12 **[ТС]**

atanov, да, только ещё хотелось бы чтобы в обе стороны работало правильно

@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

@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

@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

@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 Модератор 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

@atanov 464 / 393 / 144 Регистрация: 26.05.2016 Сообщений: 2,255
	04.04.2018, 16:22	12
	Mad1k, так трудно понять, чем помочь. Есть хоть какие-то наброски? 0

@atanov 464 / 393 / 144 Регистрация: 26.05.2016 Сообщений: 2,255
	05.04.2018, 10:32	16
	Mad1k, у diadiavova получилось? 0

	05.04.2018, 20:12

@Mad1k 0 / 0 / 0 Регистрация: 22.05.2016 Сообщений: 53
	05.04.2018, 20:12 [ТС]	17
	atanov, да, только ещё хотелось бы чтобы в обе стороны работало правильно 0