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

Question

css('color','red')当选中复选框时，我尝试应用id“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();

}

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

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

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

Answer 1

更改禁用元素的颜色属性是没有意义的。我认为您想更改占位符颜色。请注意：使用内联 JavaScript 不是一个好的做法。然后尝试以下方法：function myFunc(el){&nbsp; var input = document.getElementById('pred');&nbsp;&nbsp; if(el.checked){&nbsp;&nbsp; &nbsp; input.disabled = true;&nbsp;&nbsp; &nbsp; input.focus();&nbsp;&nbsp; &nbsp; input.classList.add('el-color');&nbsp; }&nbsp; else{&nbsp; &nbsp; input.disabled=false;&nbsp; &nbsp; input.classList.remove('el-color');&nbsp; }}.el-color::placeholder {&nbsp; color: red;}<div class="w3-row">&nbsp; <div class="w3-col s1">&nbsp; &nbsp; &nbsp; <label>Za predmet:</label>&nbsp; &nbsp; &nbsp; <input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />&nbsp; </div>&nbsp; <div class="w3-col s3">&nbsp; &nbsp; &nbsp; <div style="padding-top: 20px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="w3-check" type="checkbox" id="predsvi" name="predsvi" value="da" onclick="myFunc(this)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="predsvi"> Sve predmete</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

使用onchange事件来检测复选框的变化。$(document).ready(function () {&nbsp; $('#predsvi').change(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;let inputField = $('#pred');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (this.checked) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputField.css('color', 'red');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputField.focus();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputField.attr('disabled', this.checked);&nbsp; });});&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>&nbsp; &nbsp; <div class="w3-row">&nbsp; &nbsp; &nbsp; &nbsp;<div class="w3-col s1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<label>Za predmet:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp;<div class="w3-col s3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="padding-top: 20px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input class="w3-check" type="checkbox" id="predsvi" name="predsvi" value="da">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="predsvi"> Sve predmete</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;</div></div>

Answer 3

将其更改为：<div class="w3-row">&nbsp; <div class="w3-col s1">&nbsp; &nbsp; <label>Za predmet:</label>&nbsp; &nbsp; <input class="w3-input w3-border w3-light-grey" type="text" required placeholder="Naš broj" style="width: 90%;" name="pred" id="pred" />&nbsp; </div>&nbsp; <div class="w3-col s3">&nbsp; &nbsp; <div style="padding-top: 20px;">&nbsp; &nbsp; &nbsp; <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;}">&nbsp; &nbsp; &nbsp; <label for="predsvi"> Sve predmete</label>&nbsp; &nbsp; </div>&nbsp; </div></div>问题出在 input.css() 中，错误是使用 .css 不是 HTMLInputElement.onclick 中的函数，开始输入后会出现红色。