gpt4 book ai didi

javascript - 满足 2 个条件时启用按钮

转载 作者:行者123 更新时间:2023-11-27 22:46:01 30 4
gpt4 key购买 nike

我正在尝试找出解决此问题的方法:

我想要一个函数来检查文本字段是否填充了文本并且复选框是否被选中。当满足这些条件时,“提交”按钮将启用。如果启用“提交”按钮后不久,用户清除文本字段或取消选中复选框,则应再次禁用“提交”按钮。

我的代码:

  <%= f.text_field :humanizer_answer ,:class=> "form-control",:required => true, :id=>"answer_humanizer_profile"%>
<%= f.check_box :not_a_robot, :id=>"vbbbb",:required => true,:type=> "input" %>

<%= button_to t('confirm'), registration_path(@user), data: { confirm: t('confirm_big') }, method: :delete, :class=>"blue-button btn btn-default", :disabled =>:true,:id=>"hid-button" %>

此时我尝试了这个功能:

$("#vbbbb").change(function() {
$value = $("#answer_humanizer_profile").val();

if(this.checked && $value > 0) {
$('#hid-button').prop('disabled', false);
} else {
$('#hid-button').prop('disabled', true);
}
});

这个函数做了我需要的一点点,但不是 100%。

最佳答案

每次在输入字段中输入或更改内容或更改复选框时都会触发检查功能。评估禁用或启用提交按钮的条件。请参阅下面代码运行程序中注释良好的示例:

//cache dom elements into variables for performance
var textBox = $("#myTextBox");
var checkBox = $('#myCheckBox');
var submitButton = $("#mySubmitButton");

//trigger checking if anything changes in textbox or checkox
textBox.bind("keyup change", checker);
checkBox.change(checker);

//checker that evaluates conditions to disable or enable button
function checker() {
var cond1 = checkBox.is(":checked");
var cond2 = (textBox.val().length > 0);
if (cond1 && cond2) {
submitButton.prop('disabled', false);
} else {
submitButton.prop('disabled', true);
}
}
<!DOCTYPE html>
<html>

<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

<body>
<form>
<input type="text" id="myTextBox">
<input type="checkbox" name="vehicle" value="Bike" id="myCheckBox">I have a foobar
<br>
<button type="submit" id="mySubmitButton" disabled>SUBMIT</button>
</form>
</body>

</html>

关于javascript - 满足 2 个条件时启用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38414238/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com