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

我有一个选择下拉列表充满了选项，然后我有两个收音机像这样

<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文档中找不到正确的事件处理程序…

设置select的属性：disabled=disabled

警报$'select'.val； 一 二 三 四 在无线电输入改变状态时，将属性disabled添加到select元素。并在表单提交时删除禁用的属性，从而允许发送输入

$“收音机输入”。更改功能{ $'drop_down'.prop'disabled'，true； }; $'form'。在'submit'上，函数{ $this.find'drop_down'。removeAttr'disabled'； }; 一 二 三 四 蓝色 绿色 提交

---

您可以将按钮设置为禁用，并更新隐藏字段以使用所选选项，以便在发布表单时它也会通过

编辑并添加代码

HTML会注意到表单中的最后一个输入：

<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>
<form id="radios">
  <input type="radio" value="blue" id="blue" name="radio_option" class="radios">Blue</input>
  <input type="radio" value="green" id="green" name="radio_option" class="radios">Green</input>
  <input type="hidden" id="myvalue" name="radio_option" />
</form>

---

您的代码有一个问题，您为两个单选按钮回收了蓝色ID。我不确定这是一个预期的功能还是一个输入错误，但您需要纠正它，因为ID在文档中应该是唯一的。此外，是一个自动关闭元素，因此标记无效。相反，使用

.removeProp可能不是一个好主意，.removeAttr也是，因为已删除的属性或属性以后无法添加回来。相反，请使用.prop“…”false取消设置属性。在您的情况下，我们希望禁用元素，这是通过使用.prop'disabled'，true来实现的。但是，由于禁用的元素不会提交其值，因此需要根据策略将select元素的最终值复制到隐藏元素中

$function{ $'radios'.changefunction{ $“下拉菜单” .prop'disabled'，true 下一个 .val$'drop_down'.val； console.log$'drop\u down\u final'.val； }; }; 一 二 三 四 蓝色 绿色

---

这会起作用，但也会阻止提交select的值-禁用的元素不会与表单的其余部分一起提交。OP正在尝试阻止使用select@MarcB无论如何，select不是表单的一部分。我不清楚最终目的是什么。实际上使用.prop'disabled'，true就足够了。这些属性（例如只读、禁用）是二进制的，因此不需要任何值；完美的这正是我想要的！请注意，ID必须是唯一的。您正在为两个单选按钮回收蓝色ID。感谢@Terry捕捉到这一点。在复制和粘贴时，我应该更加注意观察……还要注意标记是无效的。它是一个自动关闭元件。如果要将文本与输入关联，请使用元素。

<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>
<form id="radios">
  <input type="radio" value="blue" id="blue" name="radio_option" class="radios">Blue</input>
  <input type="radio" value="green" id="green" name="radio_option" class="radios">Green</input>
  <input type="hidden" id="myvalue" name="radio_option" />
</form>

$('.radios').change(function() {
  $(this).attr('disabled', true);
  $('#myvalue').val($(this).val());
}