![](/img/trans.png)
[英]How to get the last value selected from dropdown and disable it using jquery
[英]how to remove disable property from button in jquery(only after all dropdown value is selected )?
我可以使用此從按鈕中刪除禁用property
$('[data-bankdetail="btnbankdetail"]').prop("disabled", false);
但是我只想在用戶從下拉列表中選擇值(直到應該禁用)時才從按鈕中刪除此屬性。換句話說,當用戶從前三個下拉列表中選擇值時,只有在此之后才是刪除禁用屬性
這是我的代碼: https : //jsbin.com/fasusajowi/edit?html,輸出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
<form>
<span><select data-bank-list="banksname">
<option value="0" disabled="true" selected="true">Select Bank</option>
<option value="1">A</option>
<option value="2">B</option>
</select></span>
<span><select data-state-list="statename">
<option value="0" disabled="true" selected="true">Select State</option>
<option value="3">C</option>
<option value="4">D</option>
</select></span>
<span><select data-district-list="districtname">
<option value="0" disabled="true" selected="true">Select District</option>
<option value="5">E</option>
<option value="6">F</option>
</select></span>
<button class="ifsc_getbankbtn" data-bankdetail="btnbankdetail" disabled="true">Get Bank Details</button>
</form>
<script>
$(function(){
//$('[data-bankdetail="btnbankdetail"]').prop("disabled", false);
})
</script>
</body>
</html>
為此,您需要向select
元素添加一個change
事件處理程序,以檢查它們是否都具有從中選擇的值。 然后,您可以根據需要設置按鈕的disabled
屬性,如下所示:
$('select').on('change', function() { var $empty = $('select').filter(function() { return !$(this).val(); }); $('[data-bankdetail="btnbankdetail"]').prop("disabled", $empty.length != 0); })
<script src="https://code.jquery.com/jquery-3.0.0.js"></script> <form> <span> <select data-bank-list="banksname"> <option value="0" disabled="true" selected="true">Select Bank</option> <option value="1">A</option> <option value="2">B</option> </select> </span> <span> <select data-state-list="statename"> <option value="0" disabled="true" selected="true">Select State</option> <option value="3">C</option> <option value="4">D</option> </select> </span> <span> <select data-district-list="districtname"> <option value="0" disabled="true" selected="true">Select District</option> <option value="5">E</option> <option value="6">F</option> </select> </span> <button class="ifsc_getbankbtn" data-bankdetail="btnbankdetail" disabled="true">Get Bank Details</button> </form>
function enableButton() { var dropdows = $('select option:selected:not([value="0"])'); $('[data-bankdetail="btnbankdetail"]').prop("disabled", dropdows.length < 3); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> </head> <body> <form onchange="enableButton()"> <span> <select data-bank-list="banksname"> <option value="0" disabled="true" selected="true">Select Bank</option> <option value="1">A</option> <option value="2">B</option> </select> </span> <span> <select data-state-list="statename"> <option value="0" disabled="true" selected="true">Select State</option> <option value="3">C</option> <option value="4">D</option> </select> </span> <span> <select data-district-list="districtname"> <option value="0" disabled="true" selected="true">Select District</option> <option value="5">E</option> <option value="6">F</option> </select> </span> <button class="ifsc_getbankbtn" data-bankdetail="btnbankdetail" disabled="true">Get Bank Details</button> </form> <script> $(function() { //$('[data-bankdetail="btnbankdetail"]').prop("disabled", false); }) </script> </body> </html>
$('#s1, #s2, #s3').change(function() { var ids = ['s1', 's2', 's3']; for (var index = 0, id; id = ids[index]; index++) { if ($('#' + id).prop('selectedIndex') < 1) { $('[data-bankdetail="btnbankdetail"]').prop("disabled", true); return; } } $('[data-bankdetail="btnbankdetail"]').prop("disabled", false); });
<script src="https://code.jquery.com/jquery-3.0.0.js"></script> <form> <span> <select data-bank-list="banksname" id="s1"> <option value="0" disabled="true" selected="true">Select Bank</option> <option value="1">A</option> <option value="2">B</option> </select> </span> <span> <select data-state-list="statename" id="s2"> <option value="0" disabled="true" selected="true">Select State</option> <option value="3">C</option> <option value="4">D</option> </select> </span> <span> <select data-district-list="districtname" id="s3"> <option value="0" disabled="true" selected="true">Select District</option> <option value="5">E</option> <option value="6">F</option> </select> </span> <button class="ifsc_getbankbtn" data-bankdetail="btnbankdetail" disabled="true">Get Bank Details</button> </form>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.