当 Select 字段和输入字段都具有值时启用禁用的提交按钮?
Enable a Disabled Submit Button when both a Select field and Input field each have Values?
我喜欢这个网站,并且能够从大家那里学到很多东西。但是,这是一个我找不到答案的问题:
我有一个带有 Select 下拉菜单的迷你表单和一个禁用了提交按钮的输入字段(两者都是必需的)。我的客户需要提交按钮 disabled/grayed 直到这两个字段都被填满,但我无法使操作生效。
到目前为止,我提供的代码仅适用于输入。我试图将 "($('#selectBox').on('change', function() {" 合并到初始函数中以向 Select 发出信号领域,但它破坏了一切,我不知道该去哪里。
我认为每个字段都需要 bounce/read 在 JQuery 代码中彼此分开,而不是让字段独立工作(正如我似乎一直在做的那样),以破译每个字段具有一个有效的值。但我正在努力寻找联系(我对 JS/JQ 还是相当陌生 - 请原谅我的无知,考虑到这个假设,如果错误的话)。
我到处寻找解决方案,但我一直没有找到答案。如果我遗漏了 link 或上一个可以帮助我的问题,请告诉我,感谢您的任何见解!
https://jsfiddle.net/jdraeger/2w68qs0y/2/
$(function() {
$('#searchInput').keyup(function() {
if ($(this).val() == '') {
$('.enableOnInput').prop('disabled', true);
} else {
$('.enableOnInput').prop('disabled', false);
}
});
})
<body>
<div id='frame'>
<div class='search'>
<form method='post'>
<select id="selectBox" class="selectBox" required>
<option value="">--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type='text' name='searchQuery' id='searchInput' required/>
<input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
</form>
</div>
</div>
</body>
两个领域和两个事件...
你可以为此写一篇"handler"。只需使用 .on()
方法,它允许绑定许多事件(此处为 keyup
和 change
)。然后,在比较中,检查两个值。如果一个 或 另一个为空,请禁用该按钮。
$(function() {
$('#searchInput, #selectBox').on('keyup change',function() {
if ($('#searchInput').val() == '' || $('#selectBox').val() == '') {
$('.enableOnInput').prop('disabled', true);
} else {
$('.enableOnInput').prop('disabled', false);
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id='frame'>
<div class='search'>
<form method='post'>
<select id="selectBox" class="selectBox" required>
<option value="">--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type='text' name='searchQuery' id='searchInput' required/>
<input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
</form>
</div>
</div>
</body>
甚至可以将条件写得更短,方法是将条件直接放在 .prop()
的 true/false 第二个参数中:
$(function() {
$('#searchInput, #selectBox').on('keyup change',function() {
$('.enableOnInput').prop('disabled', ($('#searchInput').val() == '' || $('#selectBox').val() == ''));
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id='frame'>
<div class='search'>
<form method='post'>
<select id="selectBox" class="selectBox" required>
<option value="">--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type='text' name='searchQuery' id='searchInput' required/>
<input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
</form>
</div>
</div>
</body>
您可以通过创建一个新函数来做到这一点,该函数将启用您的提交按钮,并且会在文本输入字段更改或 select 字段更改时被调用
$('#selectBox','#searchInput').on('change', function() {
enablingFunction();
});
function enablingFunction(){
if($('#selectBox').val() != "" && $('#searchInput').val() != ""){
$('#submitBtn').prop("disabled", false);
}
}
我喜欢这个网站,并且能够从大家那里学到很多东西。但是,这是一个我找不到答案的问题:
我有一个带有 Select 下拉菜单的迷你表单和一个禁用了提交按钮的输入字段(两者都是必需的)。我的客户需要提交按钮 disabled/grayed 直到这两个字段都被填满,但我无法使操作生效。
到目前为止,我提供的代码仅适用于输入。我试图将 "($('#selectBox').on('change', function() {" 合并到初始函数中以向 Select 发出信号领域,但它破坏了一切,我不知道该去哪里。
我认为每个字段都需要 bounce/read 在 JQuery 代码中彼此分开,而不是让字段独立工作(正如我似乎一直在做的那样),以破译每个字段具有一个有效的值。但我正在努力寻找联系(我对 JS/JQ 还是相当陌生 - 请原谅我的无知,考虑到这个假设,如果错误的话)。
我到处寻找解决方案,但我一直没有找到答案。如果我遗漏了 link 或上一个可以帮助我的问题,请告诉我,感谢您的任何见解!
https://jsfiddle.net/jdraeger/2w68qs0y/2/
$(function() {
$('#searchInput').keyup(function() {
if ($(this).val() == '') {
$('.enableOnInput').prop('disabled', true);
} else {
$('.enableOnInput').prop('disabled', false);
}
});
})
<body>
<div id='frame'>
<div class='search'>
<form method='post'>
<select id="selectBox" class="selectBox" required>
<option value="">--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type='text' name='searchQuery' id='searchInput' required/>
<input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
</form>
</div>
</div>
</body>
两个领域和两个事件...
你可以为此写一篇"handler"。只需使用 .on()
方法,它允许绑定许多事件(此处为 keyup
和 change
)。然后,在比较中,检查两个值。如果一个 或 另一个为空,请禁用该按钮。
$(function() {
$('#searchInput, #selectBox').on('keyup change',function() {
if ($('#searchInput').val() == '' || $('#selectBox').val() == '') {
$('.enableOnInput').prop('disabled', true);
} else {
$('.enableOnInput').prop('disabled', false);
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id='frame'>
<div class='search'>
<form method='post'>
<select id="selectBox" class="selectBox" required>
<option value="">--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type='text' name='searchQuery' id='searchInput' required/>
<input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
</form>
</div>
</div>
</body>
甚至可以将条件写得更短,方法是将条件直接放在 .prop()
的 true/false 第二个参数中:
$(function() {
$('#searchInput, #selectBox').on('keyup change',function() {
$('.enableOnInput').prop('disabled', ($('#searchInput').val() == '' || $('#selectBox').val() == ''));
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id='frame'>
<div class='search'>
<form method='post'>
<select id="selectBox" class="selectBox" required>
<option value="">--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type='text' name='searchQuery' id='searchInput' required/>
<input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
</form>
</div>
</div>
</body>
您可以通过创建一个新函数来做到这一点,该函数将启用您的提交按钮,并且会在文本输入字段更改或 select 字段更改时被调用
$('#selectBox','#searchInput').on('change', function() {
enablingFunction();
});
function enablingFunction(){
if($('#selectBox').val() != "" && $('#searchInput').val() != ""){
$('#submitBtn').prop("disabled", false);
}
}