簡體   English   中英

如何從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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM