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

Posted 2023-03-05

【中文标题】启用/禁用单选按钮选择下拉菜单

【英文标题】：Enable/Disable dropdown on radio button select

【发布时间】：2021-09-29 14:06:58

【问题描述】：

我有模态弹出窗口，在单击数据表中每一行的按钮时打开。在模态窗口上，我有 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>   

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

【参考方案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/

【参考方案2】：

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

“否”复选框的值为“是”。这需要更改，以便您的 JS 确定已选中哪个框。 .action 是一个类选择器，但选择器具有 id。正如您的问题所暗示的那样，此 HTML 可能有多个克隆，请删除 select 上的 id 并改用 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>

【讨论】：

这正在工作......但是我如何将所有其他行的默认设置为 no..这对于一行数据来说工作正常..当我打开第二行下拉的模式时启用

除非用户选择是，否则我们如何才能禁用所有行

将checked 属性添加到“否”单选按钮的 HTML 中。我更新了答案中的示例以向您展示如何