Блокировка кнопок
http://codepen.io/anon/pen/QydGGx?editors=101
Всем привет,всех с новым годом! Такой вопрос у меня,как мне при смене значений select,выделять и блокировать ту кнопку,которой соответствует ей в массиве,с else тоже не получается( |
Сергей74rus,
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/anon/pen/QydGGx?editors=101" />
</head><body>
<select class="form-control input-sm" required name="Proced" id="proced" style="width:300px;">
<option></option>
<option value="Санникова Александра">Санникова Александра</option>
<option value="Лузанова Вера">Лузанова Вера</option>
<option value="Праведникова Валентина">Праведникова Валентина</option>
<option value="Елена Чиркова">Елена Чиркова</option>
<option value="Лебединская Ирина">Лебединская Ирина</option>
</select>
<section class="color-7" id="btn-click" style=" margin-top:45px ;">
<p class="bb">
<button type="button" class="btn-sample" data-time="09:00">09:00</button>
<button type="button" class="btn-sample" data-time="09:30" >09:30</button>
<button type="button" class="btn-sample" data-time="10:00" >10:00</button>
<button type="button" class="btn-sample" data-time="10:30" >10:30</button>
<button type="button" class="btn-sample" data-time="11:00" >11:00</button>
<button type="button" class="btn-sample" data-time="11:30" >11:30</button>
<button type="button" class="btn-sample" data-time="12:00" >12:00</button>
<button type="button" class="btn-sample" data-time="12:30" >12:30</button>
<button type="button" class="btn-sample" data-time="13:00" >13:00</button>
<button type="button" class="btn-sample" data-time="13:30" >13:30</button>
<button type="button" class="btn-sample" data-time="14:00" >14:00</button>
<button type="button" class="btn-sample" data-time="14:30" >14:30</button>
<button type="button" class="btn-sample" data-time="15:00" >15:00</button>
<button type="button" class="btn-sample" data-time="15:30" >15:30</button>
<button type="button" class="btn-sample" data-time="16:00" >16:00</button>
<button type="button" class="btn-sample" data-time="16:30" >16:30</button>
<button type="button" class="btn-sample" data-time="17:00" style="width:504px;" >17:00</button>
</p>
</section>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$("#proced").change(function() {
var dat = [{
"Time": "09:00",
"Proced": "\u0421\u0430\u043d\u043d\u0438\u043a\u043e\u0432\u0430 \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440\u0430"
}, {
"Time": "09:30",
"Proced": "\u041b\u0443\u0437\u0430\u043d\u043e\u0432\u0430 \u0412\u0435\u0440\u0430"
}, {
"Time": "11:30",
"Proced": "\u041f\u0440\u0430\u0432\u0435\u0434\u043d\u0438\u043a\u043e\u0432\u0430 \u0412\u0430\u043b\u0435\u043d\u0442\u0438\u043d\u0430"
}];
var but = $(".btn-sample"),
val = this.value;
but.each(function(indx, el) {
var time = $(el).data("time");
var arr = dat.filter(function(t) {
return t.Time == time && t.Proced == val
});
arr.length ? $(el).attr({
"disabled": "disabled"
}).css({
"backgroundColor": "red"
}) : $(el).removeAttr("disabled").css({
"backgroundColor": ""
})
})
});
</script>
</body></html>
|
| Часовой пояс GMT +3, время: 06:53. |