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

`input` is an HTML element and as such does not have a `.css` method. Try `var input = $('#pred')` instead. You'll have to change your `.disabled` checks but adding styles will be easier if you're using a jQuery object — Phil, Mar 18 '20 at 00:18
I actually figured it out, I have another !important style applying to this field and that why is failing, when i remove that !important it works. problem is i can not remove it, it applies all over the site for other inputs. If someone have a recommendation for this id appreciate. — ikiK, Mar 18 '20 at 00:24

Mamun · Accepted Answer · 2020-03-18T00:39:02.540

2

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>

edited Mar 18 '20 at 00:39

answered Mar 18 '20 at 00:25

Mamun

66,969
9
47
59

1

You make a point, and this works. But I was playing around to see can i change it even if user input something. Anyway my way and yours is working. BUT I have another !important style that's applying to this field that overrides this and that's why nothing was changing. i tried making this color !important but still doesn't work. JS works so ill mark it as answer anyway. As placeholder change would be more appropriate. – ikiK Mar 18 '20 at 00:32
1

@ikiK, I am not so sure about the overriding behavior without experiencing that, though using psedu-selector is sometime tricky, anyway best of luck:) – Mamun Mar 18 '20 at 00:38
1

As suggested here https://stackoverflow.com/questions/11178673/how-to-override-important Can I have multiple selectors applied somehow to this to narrow it down to override this !important ? – ikiK Mar 18 '20 at 00:52
1

Actually never mind its working now with your last edit! Thank you. – ikiK Mar 18 '20 at 00:56

score 1 · Answer 2 · answered Mar 18 '20 at 00:41

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.

Yes you are right about this too, thank you for your input. – ikiK Mar 18 '20 at 00:46 — ikiK, Mar 18 '20 at 00:46

score 1 · Answer 3 · answered Mar 18 '20 at 06:20

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>

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

3 Answers3