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

Question

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

<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 Docs中找不到合适的事件处理程序...

Answer 1

在无线电输入更改状态时，将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> 

Answer 2

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

编辑（添加代码）

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>

jQuery代码（请注意，我在上面的收音机中提供了一个类，并在js中使用它，因此当我执行禁用操作时，隐藏的输入不会被禁用）：

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

Answer 3

设置选择的属性： disabled="disabled"

 alert($('select').val()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="drop_down" disabled="disabled"> <option value="1">One</option> <option value="2" selected>Two</option> <option value="3">Three</option> <option value="4">Four</option> <select> 

编辑

正如MarcB所指出的，如果您需要获取disabled select元素的值，则可以在提交表单时显式地执行此操作。

Answer 4

您的代码存在问题，您将两个单选按钮的ID blue回收。 我不确定这是预期功能还是错字，但由于ID在文档中应该是唯一的，因此您需要对其进行更正。 另外， <input />是一个自闭元素，因此</input>标记无效。 而是使用<label for="(id)"> 。

.removeProp()很可能不是一个好主意（所以是.removeAttr()因为已被删除属性或属性不能被添加回来。 而是使用.prop('...', false)来“取消设置”属性。 在您的情况下，我们要禁用<select>元素，这可以通过使用.prop('disabled', true) 。 但是，由于禁用的元素不会提交其值 ，因此您需要根据对相关问题的回答中提到的策略，将select元素的最终值复制到隐藏的元素中。

 $(function() { $('#radios').change(function(){ $('#drop_down') .prop('disabled', true) .next() .val($('#drop_down').val()); console.log($('#drop_down_final').val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> <input type="hidden" id="drop_down_final" /> <form id="radios"> <input type="radio" value="blue" id="blue" name="radio_option" /><label for="blue">Blue</label> <input type="radio" value="green" id="green" name="radio_option" /><label for="green">Green</label> </form>