亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無法在選中復選框時使用 JS 將 css 應用到輸入字段

無法在選中復選框時使用 JS 將 css 應用到輸入字段

慕村9548890 2023-09-18 10:25:15
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')
查看完整描述

3 回答

?
ITMISS

TA貢獻1871條經驗 獲得超8個贊

更改禁用元素的顏色屬性是沒有意義的。我認為您想更改占位符顏色。


請注意:使用內聯 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>


查看完整回答
反對 回復 2023-09-18
?
撒科打諢

TA貢獻1934條經驗 獲得超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>


查看完整回答
反對 回復 2023-09-18
?
猛跑小豬

TA貢獻1858條經驗 獲得超8個贊

將其更改為:


<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 中的函數,開始輸入后會出現紅色。



查看完整回答
反對 回復 2023-09-18
  • 3 回答
  • 0 關注
  • 145 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號