Показать сообщение отдельно
  #2 (permalink)  
Старый 02.01.2016, 17:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сергей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>
Ответить с цитированием