单选按钮选择上的启用/禁用下拉列表

jm81lzqq 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(375)

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

如果我在选择标记后添加单选按钮，但在提交后，当我选择第二行数据时，单选按钮停止工作，则我必须再次刷新页面，但我希望在选择标记之前选择单选按钮，它也应适用于每一行。有人能帮我找出我做错了什么吗

jquery ajax laravel Html ajaxform

来源：https://stackoverflow.com/questions/68482355/enable-disable-dropdown-on-radio-button-select

2条答案

按热度按时间

8fq7wneg1#

这里有几个问题，每一个问题都需要纠正才能使代码正常工作：
“否”复选框的值为“是”。这需要更改，以便js确定选中了哪个框。 .action 是一个类选择器，但是select具有 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>

赞(0）回复(0）举报 2021-09-13

nfeuvbwi2#

首先，你需要两个不同的值为你的单选按钮，你有 Yes 对于两个按钮

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

您可以在父div中放置单选按钮并选择，然后使用该父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/

赞(0）回复(0）举报 2021-09-13

我来回答

单选按钮选择上的启用/禁用下拉列表

2条答案

相关问题

热门标签

最新问答