Enable/Disable 单选按钮上的下拉菜单 select

Question

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

这是我的脚本：

$(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 处理第二行数据时提交后它停止工作，然后我必须再次刷新页面，但我希望 select 标记前的单选按钮 selection 也应该适用于每一行。有人可以帮我解决我在这里做错了什么吗

Answer 1

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

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

您可以将单选按钮和 select 放在父级 div 中，并使用该父级访问 selectbox 而不是使用 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

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

'No' 复选框的值为 'Yes'。这需要更改，以便您的 JS 确定已选中哪个框。
.action 是 class select 或者，select 有 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>

Enable/Disable 单选按钮上的下拉菜单 select

Enable/Disable dropdown on radio button select

html

jquery

ajax

laravel

ajaxform