3 回答

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>

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>

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 中的函數,開始輸入后會出現紅色。
- 3 回答
- 0 關注
- 145 瀏覽
添加回答
舉報