CODEWITHSUNDEEP
javascriptjquery
user5711656
user5711656

Reputation: 3678

how to remove disable property from button in jquery(only after all dropdown value is selected )?

I am able to remove disable property from button using this

$('[data-bankdetail="btnbankdetail"]').prop("disabled", false);

But I want to remove this property from button only when user select values from dropdown (till it should be disable).In other words when user select values from first three dropdown then only after this is remove disable property

Here is my code: https://jsbin.com/fasusajowi/edit?html,output

<!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>

Upvotes: 0

Views: 53

Answers (3)

orabis
orabis

Reputation: 2809

$('#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>

Upvotes: 0

Michele Dibenedetto
Michele Dibenedetto

Reputation: 575

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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337580

To achieve this you need to add a change event handler to the select elements, which checks to see if they all have a value selected from them. You can then set the button's disabled property as required, something like this:

$('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>

Upvotes: 1

Related Questions