无法在选中复选框时使用 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){

  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

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

Answer 3

将其更改为：

<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 中的函数，开始输入后会出现红色。