javascript - 在 jQuery 中选择单选按钮后锁定选择元素的方法

Question

我有一个充满选项的选择下拉菜单，然后我有两个这样的 radio ...

<form>
  <select id="drop_down">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>

  <div id="radios">
    <input type="radio" value="blue" id="blue" name="radio_option">Blue</input>
    <input type="radio" value="green" id="green" name="radio_option">Green</input>
  </div>
</form>  

我的目标是，一旦用户在下拉菜单中做出选择，然后选择一个单选按钮...然后选择下拉菜单将(因为缺少更好的术语)“锁定”，防止用户继续返回并更改他们的下拉选择。

我知道在 jQuery 中有一种方法可以实现这一点...但是我还没有找到一种方法...

到目前为止，这是我的 jQuery(这是错误的)...我不确定 $('#drop_down') 之后的事件应该是什么...

$('#radios').change(function(){
  $('#drop_down').removeProp(select);
});

我意识到这可能是一个简单的解决方案...我只是没有在 jQuery 文档中找到正确的事件处理程序...

Answer 1

在 radio 输入改变状态时，将属性 disabled 添加到 select 元素。并在提交表单时删除 disabled 属性，允许发送输入。

$('#radios input').change(function(){
  $('#drop_down').prop('disabled', true);
});

$('form').on('submit', function() {
    $(this).find('#drop_down').removeAttr('disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post">

    <select id="drop_down">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
    </select>
    
    <div id="radios">
      <input type="radio" value="blue" id="blue" name="radio_option">Blue</input>
      <input type="radio" value="green" id="blue" name="radio_option">Green</input>
    </div>

    <button type="submit">Submit</button>

</form>