Разблокировать кнопки при

234

30 марта 2018, 11:49

Есть радио кнопки цвета и радио кнопки размера нужна функция которая сравнивает нажатую кнопку цвета с заблокированными кнопками размера и в случае если они равны разблокировать их. Думаю код объяснит лучше меня:
Это кнопки цвета

<input type="radio" id="color131" class="color" data-method="#0ff" name="color" value="#0ff">
<input type="radio" id="color131" class="color" data-method="#000040" name="color" value="#000040">

Кнопки размера:

<input class="radio"  data-option="#0ff" type="radio" value="45" name="option" disabled="">
<input class="radio" data-option="#000040" type="radio" value="39" name="option" disabled="" >

Как вы уже поняли нужно сравнить data-method и data-option и в случае если они равны разблокировать. Написал примитивную функцию, но она не работает вот:

$(".color").click(function () {
            var color = $(this).attr("data-method");
            var size = $(".radio").attr("data-option");
            if  (color == size) {
                $('.radio[data-option = '+color+']').prop('disabled', false);
            }
        })

Answer 1

У вас проблема в том, что $(".radio") возращает набор из двух элементов. И когда мы пытаемся взять атрибут из набора, то jQuery вернет атрибут первого элемента, который в вашем случае равен #0ff.

Посмотрите на этот пример кода. Я думаю, это то, что вам нужно.

$(".color").click(function() { 
  var $this = $(this); 
  var color = $this.data("method"); 
  $('.radio').prop('disabled', true); // выключаем все элементы 
  $('.radio[data-option="' + color + '"]').prop('disabled', false); // включаем нужный 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<input type="radio" id="color131" class="color" data-method="#0ff" name="color" value="#0ff"> 
<input type="radio" id="color131" class="color" data-method="#000040" name="color" value="#000040"> 
 
<input class="radio" data-option="#0ff" type="radio" value="45" name="option" disabled=""> 
<input class="radio" data-option="#000040" type="radio" value="39" name="option" disabled="">

Answer 2

Еще, как вариант - просто пробежаться по элементам, используя метод each:

$('input[name="color"]').click(e => { 
  $('input[name="option"]').each((i, opt) => { 
    opt.disabled = opt.dataset.option !== e.target.dataset.method; 
  });  
});  
 
// то что ниже - чисто для наглядности 
$('input').each((i, inp) => { 
  let txt = inp.name + ` (${inp.dataset.method || inp.dataset.option || ''})`;  
  $('body').append($('<label/>').append(inp).append(txt));  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" data-method="#0ff" name="color" value="#0ff"> 
<input type="radio" data-method="#000040" name="color" value="#000040"> 
 
<input class="radio"  data-option="#0ff" type="radio" name="option" disabled=""> 
<input class="radio" data-option="#000040" type="radio" name="option" disabled="">

И так как disabled является булевым свойством - можно сразу присвоить ему булевый результат неравенства data-атрибутов (с которыми, имхо, гораздо удобнее работать через свойство элемента dataset).

p.s.: Тут в качестве коллбэков использованы стрелочные функции, они не поддерживаются IE - если необходима поддержка "осликом", замените их на обычные анонимные функции - function (e) {...} и function (i, opt) {...}, соответственно.