JQuery - 从下拉列表中选择的选项中删除复选框

Question

我知道这个标题有点过分。

我想要的是我有一个下拉菜单，里面有一些选项，其中两个选项是“特殊的”。当你选择这两个之一时，3个复选框应该被灰色/删除/等..

这里是一些代码：

HTML：

//THE DROPDOWN
<select id="pow-abo" style="float:left;">
<option id="data6" value="149">XXXX</option>
<option id="data11" value="199">XXXX</option>
</select>

//THE CHECKBOXES
<div id="pakkerPow">
<input id="surfstart" type="checkbox" value="29" />XXXX<br/>
<input id="surfmini" type="checkbox" value="49" />XXXX<br/>
<input id="surfmaxi" type="checkbox" value="99" />XXXX<br/>
</div>

Jquery：

// THE JQUERY DROPDOWN
$('#pow-abo').change(function (){
    powAbo = parseFloat($('#pow-abo').val());
    if($('#pow-abo').id() == 'data6' || $('#pow-abo').id() == 'data11')
    {
        $('#surfstart').hide();
        $('#surfmini').hide();
        $('#surfmaxi').hide();
    }
    visResultat2();
});

Answer 1

您的代码存在一些问题。它们以您的 if 语句为中心。看下面的代码片段：

$('#pow-abo').id()

第一个问题是 id 不是 jQuery 对象的方法。第二个问题是 #pow-abo 是 select 元素，而不是选定的选项。您似乎正在尝试获取所选选项的id。

要获取选定的选项，作为 DOM 元素（而不是 jQuery 对象），您可以执行以下操作：

var selected = $(this).find(":selected")[0];

然后您可以使用 selected.id 来获取 id 所选选项：

$('#pow-abo').change(function () {
    var selected = $(this).find(":selected")[0],
        powAbo = parseFloat($('#pow-abo').val());
    if(selected.id == 'data6' || selected.id == 'data11') {
        $('#surfstart').hide();
        $('#surfmini').hide();
        $('#surfmaxi').hide();
    }
});

请注意，您还可以将 hide 调用缩短为一个：

$("#surfstart, #surfmini, #surfmaxi").hide();

或者，隐藏 #pakkerPow 内的所有复选框：

$("#pakkerPow :checkbox").hide();

Answer 2

我会这样做： http://jsfiddle.net/pZcAF/6/

简而言之：

• 你的 jQuery 中有几个错误
• 你隐藏()复选框而不是禁用它们
• 你永远不会重新启用(或show())它们

中的附加功能示例（作为奖励，如果您发现它有用）：

• 检查“特殊”选项上给定的类（允许您动态创建特殊选项列表）

Answer 3

为了“变灰”或禁用表单元素，您必须向该元素添加禁用属性。

而不是

$('#surfstart').hide();

执行此操作

$('#surfstart').attr('disabled','disabled');

启用禁用的元素

$('#surfstart').removeAttr('disabled');

Answer 4

如果你真的想使用显示和隐藏，请看一下这个演示：
http://jsfiddle.net/xAcz7/

我不是看 id，而是看值，这是隐藏选项 1 和 2，显示选项 3。
我没有隐藏 3 个复选框，而是隐藏了包含复选框的 div。节省您的代码行；）
希望这有帮助

Answer 5

您的测试应该针对选择值，而不是针对 ids：

 // THE JQUERY DROPDOWN
$('#pow-abo').change(function (){
  powAbo = parseFloat($(this).val());
  if(powAbo == '199' || powAbo == '149')
  {
    $("#pakkerPow input").attr("disabled", "disabled");
  }
  visResultat2();
});