Enable/Disable dropdown on radio button select

Question

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

Answer 1

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>