Question

我想切换两个单选按钮，并根据选择的单选按钮选择字段。我有jQuery工作，但想知道是否有办法使它更有效。对于我想要达到的简单目标，似乎有很多行。以下是要求：当页面加载时，应该检查#aircraftType并且#aircraftModelSelect应该变灰（现在，Firefox已经忽略了“checked”）。如果用户单击#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

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

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

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

Answer 2

首先，在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'：

这一事实

aircraftType - ＆gt; aircraftTypeSelect
aircraftModel - ＆gt; aircraftModelSelect

所以，如果您知道无线电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

Answer 3

@Jim H.是的，这是真的，但他也可以使用javascript ...

第一个问题是你没有将检查设置为某些东西（如Jim H.上面所述）

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

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

Look here

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

3 个答案: