вернуть input значение disabled

231

16 ноября 2017, 05:51

Всем привет. Есть чекбокс и инпут. По нажатию на чекбокс, инпут становится активным. Но когда чекбокс отключаешь, инпут не становится снова disabled, а продолжает быть активным. Подскажите, как сделать чтобы инпут вновь стал выключенным. Вот код:

$(function() { 
  $(":checkbox").on("click", function() { 
    var dataClass = $(this).data("class"); 
    $(".js-all").each(function() { 
      this.disabled = !$(this).hasClass(dataClass); 
    }); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="checker squaredFour"> 
  <label> 
     <input class="checkbox" type="checkbox" name="checkbox-test" data-class="js-a"> 
     <span class="checkbox-custom"></span> 
   </label> 
</div> 
 
<label for="inputReturn" class="col-sm-2 control-label">Обратно</label> 
<div class="col-sm-10"> 
  <input type="text" class="form-control datepicker js-all js-a" id="inputReturn" disabled> 
  <input type="button" value=""> 
</div>

Answer 1

$(function() {
  $(":checkbox").on("click", function() {
    var dataClass = $(this).data("class");
    // dataClass мы получили равным "js-all"
    $(".js-all").each(function() {
      // пробегаем по всем элементам с классом "js-all" и для тех,
      // у кого он не установлен, ставим disabled = false
      this.disabled = !$(this).hasClass(dataClass);
    });
  });
});

Вопрос. У скольки элементов с классом js-all не установлен класс js-all? Правильно. Ни у одного.

Ваш код должен выглядеть, примерно, так

$(function() { 
  $(":checkbox").on("click", function() { 
    var checked = this.checked; 
    $(".js-all").each(function() { 
      this.disabled = !checked; 
    }); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="checker squaredFour"> 
  <label> 
     <input class="checkbox" type="checkbox" name="checkbox-test" data-class="js-a"> 
     <span class="checkbox-custom"></span> 
   </label> 
</div> 
 
<label for="inputReturn" class="col-sm-2 control-label">Обратно</label> 
<div class="col-sm-10"> 
  <input type="text" class="form-control datepicker js-all js-a" id="inputReturn" disabled> 
  <input type="button" value=""> 
</div>

А еще лучше так

$(function() { 
  $(":checkbox").on("click", function() { 
    $(".js-all").prop({disabled: !this.checked}); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="checker squaredFour"> 
  <label> 
     <input class="checkbox" type="checkbox" name="checkbox-test" data-class="js-a"> 
     <span class="checkbox-custom"></span> 
   </label> 
</div> 
 
<label for="inputReturn" class="col-sm-2 control-label">Обратно</label> 
<div class="col-sm-10"> 
  <input type="text" class="form-control datepicker js-all js-a" id="inputReturn" disabled> 
  <input type="button" value=""> 
</div>

Answer 2

У вас при событии click в this.checked приходит состояние чекбокса. Вот исходя из этого состояния и выставляйте свойство disabled у инпута:

$(function() { 
  $(":checkbox").on("click", function(e) { 
    var checked = this.checked; 
    var dataClass = $(this).data("class"); 
    $(".js-all").each(function() { 
      this.disabled = !checked; 
    }); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="checker squaredFour"> 
  <label> 
     <input class="checkbox" type="checkbox" name="checkbox-test" data-class="js-a"> 
     <span class="checkbox-custom"></span> 
   </label> 
</div> 
 
<label for="inputReturn" class="col-sm-2 control-label">Обратно</label> 
<div class="col-sm-10"> 
  <input type="text" class="form-control datepicker js-all js-a" id="inputReturn" disabled> 
  <input type="button" value=""> 
</div>