jquery - 选择标签 .change -> if value == 3 -> 删除另一个 select 的 attr 'disabled'

Question

我有 6 个选择标签。

FIRST: select with value = 2, 3, 4, 5
SECOND & THIRST: select doesn't has attribute 'disabled'
FORTH, FIFTH, SIXTH: select has attribute 'disabled'

我需要:

if select value == 3 -> FORTH remove attribute 'disabled'
if select value == 4 -> FORTH & FIFTH remove attribute 'disabled'
if select value == 5 -> FORTH & FIFTH & SIXTH remove attribute 'disabled'
and else select value == 2 -> FORTH, FIFTH, SIXTH: add attribute 'disabled'

这是我的脚本

<select id="FIRST">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<select id="SECOND">
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
</select>

<select id="THIRST">
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
</select>

<select id="FORTH" disabled>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
</select>

<select id="SIXTH" disabled>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
</select>

<select id="FIFTH" disabled>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
  <option value=" ">Something</option>
</select>


<script>
$(document).ready(function(){
    $('#FIRST').change(function(event) {
    if ($(this).val() == 3) {
        $('#FORTH').removeAttr('disabled');
    }
    else if $(this).val() == 4) {
        $('#FORTH, #FIFTH').removeAttr('disabled');
    }
    else if ($(this).val() == 5) {
        $('#FORTH, #FIFTH, #SIXTH').removeAttr('disabled');
    }
    else {
        $('#FORTH, #FIFTH, #SIXTH').attr('disabled');
    };
        });
});
 </script>

这是正确的吗？那不运行

Answer 1

正如前面所说，您有 2 个语法错误，一个位于第一个 else if 上，一个位于倒数第二行，其中缺少右括号 )

虽然这不是您所要求的，但这是何时使用 switch case 以避免丑陋、低效的代码的完美示例，请参阅下面的示例:

$('#FIRST').change(function (event) {
    switch (+$(this).val())
    {
        case 3: $('#FORTH').prop('disabled', false); break;
        case 4: $('#FORTH, #FIFTH').prop('disabled', false); break;
        case 5: $('#FORTH, #FIFTH, #SIXTH').prop('disabled', false); break;
        default: $('#FORTH, #FIFTH, #SIXTH').prop('disabled', true); break;
    }
});

编辑 - 您的标记还存在一个令人困惑的排序问题，其中第 6 和第 5 的顺序错误，我修复了此问题(并将 THIRST 重命名为 THIRD)，您可以看到上述代码与修订后的代码一起使用的工作演示在此 JSFiddle 中进行标记

为了实现 Derek Henderson 评论中所描述的内容，上面的代码可以更新为如下所示:

$('#FIRST').change(function (event) {
    switch (+$(this).val())
    {
        case 3: $('#FORTH').prop('disabled', false); $('#FIFTH, #SIXTH').prop('disabled', true); break;
        case 4: $('#FORTH, #FIFTH').prop('disabled', false); $('#SIXTH').prop('disabled', true); break;
        case 5: $('#FORTH, #FIFTH, #SIXTH').prop('disabled', false); break;
        default: $('#FORTH, #FIFTH, #SIXTH').prop('disabled', true); break;
    }
});

这是一个处理 JSFiddle 的示例.