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>