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中有几个错误
您hide()复选框而不是禁用它们
你永远不会重新启用（或show()）他们回来

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

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

Answer 3

为了“灰显”或禁用表单元素，您必须将disabled属性添加到元素中。

而不是

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

执行此操作

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

启用已停用的元素

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

Answer 4

如果你真的想使用show和hide看看这个demo： 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();
});

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

5 个答案: