51工具盒子英文:
Jquery - validate textbox based on checkbox
问题 {#heading}
I want to validate a value only when a checkbox is checked. I am able to get the validation running but if the checkbox is unchecked, the validation still runs.
Here is my code:
$("#personal_deliver_same").on("click", function(){
var check = $("#personal_deliver_same").is(':checked');
if(check){
$("#input-payment-postcode").keyup(function (){
if($("#input-payment-postcode").val().length > 5) {
alert("in2");
}
});
}
else{
alert("out2");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label>My Checkbox</label>
英文:
I want to validate a value only when a checkbox is checked. I am able to get the validation running but if the checkbox is unchecked, the validation still runs.
Here is my code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#personal_deliver_same").on("click", function(){
var check = $("#personal_deliver_same").is(':checked');
if(check){
$("#input-payment-postcode").keyup(function (){
if($("#input-payment-postcode").val().length > 5) {
alert("in2");
}
});
}
else{
alert("out2");
}
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
`<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label>My Checkbox</label>
`
<!-- end snippet -->
答案1 {#1}
得分: 1
I think this will be what you want.
-
它将把复选框的值存储在一个变量中
-
它将监视复选框的
input事件，而不仅仅是click。现在当值发生变化时，事件将发生 -
它将监视文本框的
input事件以检测变化。如果发生变化并且复选框被选中，它将显示输出 -
当复选框被选中时，它也会触发文本框上的事件
const $checkbox = $("#personal_deliver_same"); const $txtPostCode = $("#input-payment-postcode"); let isChecked = $checkbox.is(":checked");
$checkbox.on("input", function(){ isChecked = $checkbox.is(":checked"); console.log("Checkbox changed:", isChecked);
if(isChecked){ $txtPostCode.trigger('input'); }});
$txtPostCode.on('input', function (){ if(isChecked) { if($txtPostCode.val().length > 5){ console.log("post code length is more than 5"); } else { console.log("post code length is 5 or less"); } } });
请注意，这些是您提供的代码的中文翻译部分，不包括问题或其他内容。 英文:
I think this will be what you want.
- It will store the value of the checkbox in a variable
- it will monitor the checkbox's
inputevent instead of justclick. Now when the value changes the event will occur - It will monitor the
inputevent of the text box for changes. If a change happens and the box is checked it will show you the output - When the box is checked, it will also fire the event on the textbox
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const $checkbox = $("#personal_deliver_same");
const $txtPostCode = $("#input-payment-postcode");
let isChecked = $checkbox.is(":checked");
$checkbox.on(\"input\", function(){
isChecked = $checkbox.is(\":checked\");
console.log(\"Checkbox changed:\", isChecked);
if(isChecked){
$txtPostCode.trigger(\'input\');
}
});
`$txtPostCode.on('input', function (){
if(isChecked) {
if($txtPostCode.val().length > 5){
console.log("post code length is more than 5");
} else {
console.log("post code length is 5 or less");
}
}
});
`
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
`<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label for="personal_deliver_same">My Checkbox</label>
`
<!-- end snippet -->
答案2 {#2}
得分: 1
你正在错误的顺序绑定你的事件处理程序，并且在需要时没有进行检查。尝试这种方式：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="control-label" for="input-payment-postcode">邮编</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1">
<label>我的复选框</label>
var check = false;
$("#personal_deliver_same").on("click", function() {
check = $("#personal_deliver_same").is(':checked');
});
$("#input-payment-postcode").keyup(function() {
if (check && $("#input-payment-postcode").val().length > 5) {
console.log("in2");
}
});
（注意：我已经将代码和HTML分别翻译，没有翻译的部分不包括在内。） 英文:
You're binding your event handlers in the wrong sequence and not checking it when you need to. Try this way:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var check = false;
$(\"#personal_deliver_same\").on(\"click\", function() {
check = $(\"#personal_deliver_same\").is(\':checked\');
});
`$("#input-payment-postcode").keyup(function() {
if (check && $("#input-payment-postcode").val().length > 5) {
console.log("in2");
}
});
`
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
`<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label>My Checkbox</label>
`
<!-- end snippet -->
答案3 {#3}
得分: 0
<label for="postcode">邮政编码</label>
<input id="postcode" />
<input id="validate" type="checkbox">
<label for="validate">验证邮政编码？</label>
<script>
$('#validate').on('click', () => shouldValidate())
$('#postcode').on('keyup', () => shouldValidate())
function shouldValidate(){
if( $('#validate').is(':checked') )
// 验证
else
// 不验证
}
</script>
英文:
<label for="postcode">Post Code</label>
<input id="postcode" />
\<input id=\"validate\" type=\"checkbox\"\>
\<label for=\"validate\"\>Validate Post Code?\</label\>
\<script\>
$(\'#validate\').on(\'click\',() =\> shouldValidate() )
$(\'#postcode\').on(\'keyup\',() =\> shouldValidate() )
`function shouldValidate(){
if( $('#validate').is(':checked') )
// Validate
else
// Don't Validate
}
</script>
`
