单击Checkbox工作几次点击后的jQuery更改类

时间:2017-10-18 12:14:56

标签: javascript jquery html html5 checkbox

我已经设置了以下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>
&#13;
&#13;
&#13;

我想要实现的是点击复选框删除或添加课程。在单击复选框的同时,我将禁用其上方的输入字段。奇怪的是它有效,但只有在我第四次点击复选框后才能使用。

你能帮帮忙吗?

2 个答案:

答案 0 :(得分:0)

首先,摆脱点击事件绑定:

UNIX_TIMESTAMP()

其次,您的锚标记有语法错误

SELECT date(date), currency, min/max/avg/sum . . . 
FROM currency_data
WHERE currency = 'GBP'
GROUP BY date(date), currency
ORDER BY date ASC

应该是

$(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);
    }
  });
});

答案 1 :(得分:-2)

因为您不需要同时使用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>