gpt4 book ai didi

javascript - 在启用按钮之前验证文本区域已填充并在表单中单击了多项选择

转载 作者:行者123 更新时间:2023-11-28 06:13:17 26 4
gpt4 key购买 nike

链接到相关的 fiddle (当前的 javascript 取自此 stackoverflow response ): https://jsfiddle.net/5qomb6fe/ .

HTML

<body>
<div class="container">
<h5>Input Words and Make Selection</h5>
<br>
<form method='post'>
<div class="row"></div>
<textarea class="form-control" id="field" name="words" rows="12"></textarea>
<br>
<select class="form-control" id="type" multiple name="type" size="13">
<option value="">Null</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
</select>
<br>
<input class="btn btn-danger" name="button" type="submit" value="Submit", id="keybutton" disabled="disabled">
</form>
</div>

Javascript

(function() {
$('form > textarea').keyup(function() {
var empty = false;
$('form > textarea').each(function() {
if ($(this).val() == '') {
empty = true;
}
});

if (empty) {
$('#keybutton').attr('disabled', 'disabled');
} else {
$('#keybutton').removeAttr('disabled');
}
});
})()

虽然这可以在填写表单时有效地启用该按钮,但我想知道如何仅在填写表单并且在多选中进行选择后才能启用该按钮。

我对javascript、jquery等的了解相当有限。如有任何帮助,我们将不胜感激。

最佳答案

检查这个,或检查片段。我已经更新了代码片段,您可以先选择并键入,然后启用按钮,反之亦然。

https://jsfiddle.net/5qomb6fe/5/

(function() {
function enabledButton(){
if(empty == false && selection == false){
$('#keybutton').removeAttr('disabled');
}else{
$('#keybutton').attr('disabled', 'disabled');
}
}
var selection = null;
var empty = null;
$('form > textarea').keyup(function() {
$('form > textarea').each(function() {
if ($(this).val()=='') {
empty = true;
}else{
empty = false;
}
});
enabledButton();
});
$('.selection').on('change',function(){
selection = false;
enabledButton();
});
})()
<style>
body {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
th, td {
padding: 1px;
}
</style>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<h5>Input Words and Make Selection</h5>
<br>
<form method='post'>
<div class="row"></div>
<textarea class="form-control" id="field" name="words" rows="12"></textarea>
<br>
<select class="form-control selection" id="type" multiple name="type" size="13">
<option value="">Null</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
</select>
<br>
<input class="btn btn-danger" name="button" type="submit" value="Submit", id="keybutton" disabled="disabled">
</form>
</div>

关于javascript - 在启用按钮之前验证文本区域已填充并在表单中单击了多项选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36191722/

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