jQuery的變化類

Question

我已經設置了以下的jQuery代碼幾次點擊之後：

$('#check').change(function(){ 
 
if (this.checked){ 
 
$('#check').click(function() { 
 
$("#rk").addClass('disabled', this.checked); 
 
$("#rkBtn").removeClass('disabled', this.checked); 
 
}); 
 
} else { 
 
$("#rk").removeClass('disabled', this.checked); 
 
$("#rkBtn").addClass('disabled', this.checked); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="field text-left"> 
 
<label class="text-left">Rk</label> 
 
<input type="text" id="rk" class="rk" name="rk" placeholder="00.00.00 - 000.00" onkeyup="showHint(this.value,'rk')" /> 
 

 
</div> 
 
<div class="field"> 
 
<input id="check" type="checkbox" name="checkbox"/> 
 
<label class="title-checkbox">Tick this Checkbox.</label> 
 
</div> 
 
<div class="field"> 
 
<div class="col-lg-12 col-sm-12 col-xs-12" style=""> 
 
<a href="#" id="rkBtn" class="btn disabled"Next Step</a> 
 
</div> 
 
</div>

我試圖做到的，是刪除或添加一個類點擊複選框。在單擊複選框的同時，我將禁用其上方的輸入字段。奇怪的是，它的工作原理，但只有當我第四次點擊複選框。

你能幫忙嗎？

Answer 1

因爲您不需要同時使用click和change函數。就這樣。

$('#check').change(function(){ 
 
if (this.checked){ 
 
//$('#check').click(function() { 
 
$("#rk").addClass('disabled', this.checked); 
 
$("#rkBtn").removeClass('disabled', this.checked); 
 
//}); 
 
} else { 
 
$("#rk").removeClass('disabled', this.checked); 
 
$("#rkBtn").addClass('disabled', this.checked); 
 
} 
 
});

.disabled { 
 
    opacity: .5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="field text-left"> 
 
<label class="text-left">Rk</label> 
 
<input type="text" id="rk" class="rk" name="rk" placeholder="00.00.00 - 000.00" onkeyup="showHint(this.value,'rk')" /> 
 

 
</div> 
 
<div class="field"> 
 
<input id="check" type="checkbox" name="checkbox"/> 
 
<label class="title-checkbox">Tick this Checkbox.</label> 
 
</div> 
 
<div class="field"> 
 
<div class="col-lg-12 col-sm-12 col-xs-12" style=""> 
 
<a href="#" id="rkBtn" class="btn disabled"Next Step</a> 
 
</div> 
 
</div>

Answer 2

首先，剛剛擺脫click事件綁定：

$(document).ready(() => { 
    $("#check").change(function() { 
    if (this.checked) { 
     $("#rk").addClass("disabled", this.checked); 
     $("#rkBtn").removeClass("disabled", this.checked); 
    } else { 
     $("#rk").removeClass("disabled", this.checked); 
     $("#rkBtn").addClass("disabled", this.checked); 
    } 
    }); 
}); 

其次，你的錨標記有語法錯誤

<a href="#" id="rkBtn" class="btn disabled"Next Step</a> 

應該是

<a href="#" id="rkBtn" class="btn disabled">Next Step</a>