Question

我有一个模态弹出窗口，它在点击数据表中每一行的按钮时打开。在模式窗口上，我有 4 个下拉列表，其中我希望为每一行数据禁用一个下拉列表。当用户将单选按钮值选择为“是”时，它应该被启用。

这是我的脚本：

$(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');
    }
  });
});

这是我的 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>

如果我在 select 标签后添加单选按钮，它在一行中工作，但是在我选择第二行数据时提交后它停止工作，那么我必须再次刷新页面，但我想要在 select 标签之前选择单选按钮它也应该适用于每一行。有人可以帮我解决我在这里做错了什么

Answer 1

首先，您的单选按钮需要 2 个不同的值，两个按钮都有 Yes

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

您可以将单选按钮和选择放在父 div 中，然后使用该父级访问选择框，而不是使用 next , prev ... 像 <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/

Answer 2

这里有几个问题，每个问题都需要更正才能使您的代码正常工作：

“否”复选框的值为“是”。这需要更改，以便您的 JS 确定哪个框已被选中。
.action 是一个类选择器，但选择具有 id。由于您的问题表明此 HTML 可能有多个克隆，请删除 id 上的 select 并改用 class
select 不是任一收音机的 prev() 元素。通过从那里检索 closest() 公共父级和 find() 来解决此问题。
您在单选按钮上重复了相同的 id 和 #check，但它们必须是唯一的。更改或删除它们。

更正后，代码有效：

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>

启用/禁用单选按钮下拉菜单选择

2 个答案: