Невозможно применить css к полю ввода, используя JS при установленном флажке

Question

Я пытаюсь применить css('color','red') к полю ввода с идентификатором "pred", когда флажок установлен. В настоящее время код успешно отключает поле ввода при проверке, но по какой-то причине я не могу понять, как применить стилирование в том же коде.

Я знаю, как сделать это с помощью отдельной функции, но я хотел бы знать, как сделать это в этом коде и узнать, что я делаю неправильно.

<div class="w3-row">
  <div class="w3-col s1">
    <label>Za predmet:</label>
    <input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />
  </div>
  <div class="w3-col s3">
    <div style="padding-top: 20px;">
      <input class="w3-check" type="checkbox" id="predsvi" name="predsvi" value="da" onclick="var input = document.getElementById('pred'); if(this.checked){ input.disabled = true; input.css('color','red');}else{input.disabled=false; input.focus();}">
      <label for="predsvi"> Sve predmete</label>
    </div>
  </div>
</div>

Краткий код:

onclick="var input = document.getElementById('pred'); if(this.checked) { 
  input.disabled = true; 
  input.css('color','red');}else{input.disabled=false; input.focus();
}

Ошибка для этой версии - ввод. css не является функцией.

Если я делаю это так, я получаю без ошибок, но ничего не происходит.

$('pred').css('color','red')

Answer 1

Изменение свойства color отключенного элемента не имеет смысла. Я думаю, что вы хотите изменить цвет заполнителя .

Обратите внимание: Использование встроенного JavaScript не является хорошей практикой.

, затем попробуйте следующий способ:

function myFunc(el){
  var input = document.getElementById('pred'); 
  if(el.checked){ 
    input.disabled = true; 
    input.focus(); 
    input.classList.add('el-color');
  }
  else{
    input.disabled=false;
    input.classList.remove('el-color');
  }
}

.el-color::placeholder {
  color: red;
}

<div class="w3-row">
  <div class="w3-col s1">
      <label>Za predmet:</label>
      <input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />
  </div>
  <div class="w3-col s3">
      <div style="padding-top: 20px;">
          <input class="w3-check" type="checkbox" id="predsvi" name="predsvi" value="da" onclick="myFunc(this)">
          <label for="predsvi"> Sve predmete</label>
      </div>
  </div>
</div>

Answer 2

Используйте событие onchange, чтобы обнаружить изменения флажка.

$(document).ready(function () {
  $('#predsvi').change(function () {
         let inputField = $('#pred');
         if (this.checked) {
             inputField.css('color', 'red');
         }
         else {
             inputField.focus();
         }
         inputField.attr('disabled', this.checked);
  });
});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="w3-row">
       <div class="w3-col s1">
           <label>Za predmet:</label>
           <input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />
       </div>
       <div class="w3-col s3">
          <div style="padding-top: 20px;">
             <input class="w3-check" type="checkbox" id="predsvi" name="predsvi" value="da">
              <label for="predsvi"> Sve predmete</label>
    	  </div>
       </div>
</div>

Answer 3

Измените его на:

<div class="w3-row">
  <div class="w3-col s1">
    <label>Za predmet:</label>
    <input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />
  </div>
  <div class="w3-col s3">
    <div style="padding-top: 20px;">
      <input class="w3-check" type="checkbox" id="predsvi" name="predsvi" value="da" onclick="var input = document.getElementById('pred'); if(this.checked){ input.disabled = true; input.focus(); input.style.color= 'red';}else{input.disabled=false;}">
      <label for="predsvi"> Sve predmete</label>
    </div>
  </div>
</div>

проблема была во вводе. css () и ошибка в том, что использование. css не является функцией в HTMLInputElement.onclick красный цвет будет появляются после того, как вы начнете печатать.