1

我有 6 个选择标签。

FIRST：选择值 =
2、3、4、5 SECOND & THIRST：选择没有属性“禁用”
第四、第五、第六：选择有属性“禁用”

我需要：

如果选择值 == 3 -> FORTH 删除属性“禁用”
如果选择值 == 4 -> FORTH & FIFTH 删除属性“禁用”
如果选择值 == 5 -> FORTH & FIFTH 和 SIXTH 删除属性“禁用”
，否则选择值 == 2 -> FORTH、FIFTH、SIXTH：添加属性“禁用”

这是我的脚本

<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>

那是对的吗？那不运行

4

3 回答 3

2

如前所述，您有 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;
    }
});

编辑 - 您的标记也有一个令人困惑的排序问题，其中 SIXTH 和 FIFTH 以错误的方式进行，我修复了这个（并将 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上工作的例子。

于 2013-03-08T15:57:21.293 回答
1

您的代码中有 2 个语法错误，您缺少})关闭change处理程序和(其中一个else if语句。

$(document).ready(function(){
    $('#FIRST').change(function(event) {
       if ($(this).val() == 3) {
           $('#FORTH').prop('disabled', false);
       }
       else if ($(this).val() == 4) { // here
           $('#FORTH, #FIFTH').prop('disabled', false);
       }
       else if ($(this).val() == 5) {
           $('#FORTH, #FIFTH, #SIXTH').prop('disabled', false);
       }
       else {
           $('#FORTH, #FIFTH, #SIXTH').prop('disabled', true);
       }
   }) // and here
});
于 2013-03-08T15:48:59.613 回答
0

您缺少一个 (. 更改：

 else if $(this).val() == 4) {
    $('#FORTH, #FIFTH').prop('disabled', false);
}

至

 else if ($(this).val() == 4) {
    $('#FORTH, #FIFTH').prop('disabled', false);
}
于 2013-03-08T15:49:41.050 回答