使用 jquery 通过单选按钮切换禁用状态

Question

我想切换两个单选按钮并根据选择的单选按钮选择字段。我有 jQuery 工作，但想知道是否有办法让它更有效。对于我要实现的简单目标，似乎有很多行。以下是要求： 当页面加载时，#aircraftType 应该被选中并且#aircraftModelSelect 应该是灰色的（现在，“选中”被 Firefox 忽略了）。 如果用户单击#aircraftType 或#aircraftModel，则应禁用相反的选择字段（如果选中#aircraftModel，则应禁用#aircraftTypeSelect，反之亦然）。感谢您对优化此代码的任何帮助。

jsfiddle 上也有代码：http://jsfiddle.net/JuRKn/

    $("#aircraftType").attr("checked");
    $("#aircraftModel").removeAttr("checked");
    $("#aircraftModelSelect").attr("disabled","disabled").addClass("disabled");
    $("#aircraftType").click(function(){
      $("#aircraftModelSelect").attr("disabled","disabled").addClass("disabled");
      $("#aircraftTypeSelect").removeAttr("disabled").removeClass("disabled");
    });
    $("#aircraftModel").click(function(){
      $("#aircraftTypeSelect").attr("disabled","disabled").addClass("disabled");
      $("#aircraftModelSelect").removeAttr("disabled").removeClass("disabled");
    });

HTML

<div class="aircraftType">
  <input type="radio" id="aircraftType" name="aircraft" checked />
  <label for="aircraftType">Aircraft Type</label>
  <select size="6" multiple="multiple" id="aircraftTypeSelect" name="aircraftType">
    <option value="">Light Jet</option>
    <option value="">Mid-Size Jet</option>
    <option value="">Super-Mid Jet</option>
    <option value="">Heavy Jet</option>
    <option value="">Turbo-Prop</option>
  </select>
</div>
<div class="aircraftModel">
  <input type="radio" id="aircraftModel" name="aircraft" />
  <label for="aircraftModel">Aircraft Model</label>
  <select size="6" multiple="multiple" id="aircraftModelSelect" name="aircraftModel">
    <option value="">Astra SP</option>
    <option value="">Beechjet 400</option>
    <option value="">Beechjet 400A</option>
    <option value="">Challenger 300</option>
    <option value="">Challenger 600</option>
    <option value="">Challenger 603</option>
    <option value="">Challenger 604</option>
    <option value="">Challenger 605</option>
    <option value="">Citation Bravo</option>
  </select>
</div>

Answer 1

@Jim H. 是的，这是真的，但他也可以用 javascript 来做到这一点......

第一个问题是你没有设置 check 到某事（就像上面说的 Jim H.）

第二个问题是，在将同名元素添加到另一个元素后，您从同名元素中删除了检查的属性（这也会删除第一个元素上的属性）

$("#aircraftModel").removeAttr("checked"); //place this first
$("#aircraftType").attr("checked", "checked"); //and then this

Look here

Answer 2

将单选按钮中的checked 属性更改为checked="checked"，然后从$(document).ready() 中删除前两行。

您唯一需要做的就是禁用正确的列表并添加您的点击处理程序。

我在 IE、Chrome 和 FF 中测试了更新后的小提琴 http://jsfiddle.net/gQrk2/。

Answer 3

首先，在您的 HTML 中正确初始化 checked 和 disabled 状态（因为它们是静态的，所以没有理由使用 JavaScript 来做）。

<input type="radio" id="aircraftType" name="aircraft" checked="checked" />
<!-- other stuff -->
<select size="6" multiple="multiple" id="aircraftModelSelect" 
      name="aircraftModel" disabled="disabled">

其次，为了减少 LOC，您可以利用 select.id = radio.id + 'Select':

• 飞机类型->飞机类型选择
• 飞机型号 -> 飞机型号选择

因此，如果您知道无线电 ID ($(this).attr('id'))，您可以简单地禁用所有其他 selects，但与此无线电相关的那个（如果有两个以上的无线电/选择，这也可以工作）。

$(document).ready(function() {
    $('input[name="aircraft"]').click(function() {
        $('select[name^="aircraft"]').attr('disabled', 'disabled');
        $('#' + $(this).attr('id') + 'Select').removeAttr('disabled');
    });
});

我按名称选择单选按钮，但如果您的文档中只有这组单选按钮，您可以简单地使用[type="radio"]，甚至可以根据您的需要组合这两个选择器。

这将 LOC 的数量减少了 50% 以上。

Working fiddle.