Question posted in
You can find the official documentation here.

Enable/Disable dropdown on radio button select – Jquery ajax

I have modal popup window which open on button click for each row in data table. On modal window I have 4 dropdowns and out of these I want one dropdown to be disabled for every row data. When user selects the radio button value as "Yes" it should be enabled.

Here is my script:

$(document).ready(function(){
    $('.action').attr('disabled', 'disabled');

  var $checkBox = $('.check');

  $checkBox.on('change', function(e) {
    //get the previous element to us, which is the select
    var $select = $(this).prev();
    
    if (this.checked) {
      $select.removeAttr('disabled');
    } else {
      $select.attr('disabled', 'disabled');
    }
  });
});

This is my html:

<div class="form-group">
                       <label>Action Taken:</label>
                       <input type="radio" class="check" id="check" name="check" value="Yes">Yes
                       <input type="radio" class="check" id="check" name="check" value="Yes">No
                      <select name="action" id="action" class="form-control" disabled>
                         <option value="">Select Action</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                      </select>     
                        
                    </div>

If I am adding the radio buttons after select tag its’s working for one row, but after submit when I am selecting second row data it stops working then I have to refresh page again, but I want radio button selection before the select tag also it should work for each row. Can someone help me out what I am doing wrong here

Tags:

2

Answers


  1. 0

    first of all you need 2 different values for your radio button , you have Yes for both buttons

     <input type="radio" class="check"  name="check" value="Yes">Yes
 <input type="radio" class="check"  name="check" value="No">No

    you can put your radio buttons and select in a parent div and use that parent to get to access to selectbox instead of using next , prev … like <div class="form-group">

    $('.check').change(function(){

   let select = $(this).parents('.form-group:first').find('select') ; 

   if( $(this).val() == 'Yes')
        select.attr('disabled' , false );
   else 
        select.attr('disabled' , true );

})

    https://jsfiddle.net/ns5g3rqe/

    Login or Signup to reply.
  2. 0

    There’s several issues here, and each need to be corrected for your code to work properly:

    1. The ‘No’ checkbox has a value of ‘Yes’. This needs to be changed in order for your JS to determine which box has been checked.
    2. .action is a class selector, yet the select has that id. As your question suggests there may be multiple clones of this HTML, remove the id on the select and use the class instead
    3. The select is not the prev() element to either radio. Fix this by retrieving the closest() common parent and find() from there.
    4. You’re repeated the same id of #check on the radio buttons, when they must be unique. Either change or remove them.

    With that corrected, the code works:

    jQuery($ => {
  $('.action').prop('disabled', true);

  let $checkBox = $('.check').on('change', e => {
    var $select = $(e.target).closest('.form-group').find('.action');
    $select.prop('disabled', e.target.value !== 'Yes' && e.target.checked);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Action Taken:</label>
  <label>
    <input type="radio" class="check" name="check" value="Yes" />
    Yes
  </label>
  <label>
    <input type="radio" class="check" name="check" value="No" checked />
    No
  </label>

  <select name="action" class="action form-control" disabled>
    <option value="">Select Action</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
</div>
<div class="form-group">
  <label>Action Taken:</label>
  <label>
    <input type="radio" class="check" name="check" value="Yes" />
    Yes
  </label>
  <label>
    <input type="radio" class="check" name="check" value="No" checked />
    No
  </label>

  <select name="action" class="action form-control" disabled>
    <option value="">Select Action</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search