Unable to apply css to input field using JS on checkbox checked

Question

I'm trying to apply the css('color','red') on input field with id "pred" when checkbox is checked. Currently code is successfully disabling the input field when checked but for some reason I'm unable to figure out how to apply styling in same code.

I know how to do it with separate function but I would like to know how to do it within this code and learn what I'm doing wrong.

<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>

Short code:

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

Error for this version is input.css is not a function.

If I do it like this i get no error but nothing happens.

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

Answer 1

Changing color property of a disabled element is meaningless. I think you want to change the placeholder color.

Please Note: Using inline JavaScript is not a good practice.

then try the following way:

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

Change it to:

<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>

the problem was in the input.css() and the error is that using the .css is not a function in HTMLInputElement.onclick the red color will appear after you start typing.

Answer 3

Use onchange event to detect the changes of the checkbox.

$(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>