无法在选中复选框时使用 JS 将 css 应用到输入字段

Question

我正在尝试在选中复选框时在 ID 为 "pred" 的输入字段上应用 css('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="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();
}

此版本的错误是 input.css 不是函数。

如果我这样做，我不会收到任何错误，但什么也不会发生。

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

Answer 1

更改颜色属性禁用元素是没有意义的。我认为您想更改 placeholder 颜色。

请注意： 使用内联 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

改为：

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

问题出在 input.css() 中，错误是使用 .css 不是 HTMLInputElement.onclick 中的函数开始输入后会出现红色。

Answer 3

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

无法在选中复选框时使用 JS 将 css 应用到输入字段

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

html

javascript

css

jquery

w3-css