选中复选框时无法使用 JS 将 CSS 应用于输入字段答案

【问题标题】：Unable to apply css to input field using JS on checkbox checked选中复选框时无法使用 JS 将 CSS 应用于输入字段
【发布时间】：2020-03-17 23:58:22
【问题描述】：

当复选框被选中时，我正在尝试在 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')

【问题讨论】：

检查你的身份证，pred 不在！
最后一行：id="pred" ...
你的输入框是 pred 但你的复选框是 predsvi
input 是一个 HTML 元素，因此没有 .css 方法。请改用var input = $('#pred')。您必须更改 .disabled 检查，但如果您使用 jQuery 对象，添加样式会更容易
我实际上想通了，我有另一种 !important 样式应用于该字段，为什么会失败，当我删除它时 !important 它可以工作。问题是我无法删除它，它适用于整个站点的其他输入。如果有人对此 id 有建议，不胜感激。

标签： javascript jquery html css w3-css

【解决方案1】：

更改禁用元素的 color 属性是没有意义的。我想你想改变 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>

【讨论】：

你提出了一个观点，这很有效。但是我在玩，看看即使用户输入了一些东西，我也能改变它。无论如何，我的方式和你的方式都有效。但是我有另一种 !important 样式适用于该字段，它会覆盖它，这就是为什么没有任何变化的原因。我尝试制作这种颜色！重要但仍然无法正常工作。 JS 工作得如此糟糕，无论如何都将其标记为答案。因为占位符更改会更合适。
@ikiK，如果没有经历过，我不太确定压倒一切的行为，尽管使用 psedu-selector 有时很棘手，但祝你好运:)
正如这里所建议的 stackoverflow.com/questions/11178673/how-to-override-important 我可以以某种方式将多个选择器应用于此以缩小范围以覆盖此 !important 吗？
实际上，不要介意它现在与您的最后一次编辑一起工作！谢谢。

【解决方案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 中的函数开始输入后会出现红色。

【讨论】：

是的，你也是对的，谢谢你的意见。

【解决方案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>

【讨论】：