-1

我的表单由标题中的复选框和下拉列表以及页面主要内容中的几个下拉列表组成。在页面加载时，我希望禁用所有下拉菜单。选中复选框后，我希望启用标题下拉菜单。如果用户在标题下拉列表中选择一个选项，则所有其他下拉列表都应变为可选状态。最后，如果再次单击标题中的复选框，则应再次禁用所有下拉菜单。

这是我尝试过的代码：

HTML：

Header:
<br /><input type="checkbox" name="approve" />
<select id="myddl" name="myddl">
    <option value="1">One</option>
    <option value="2">Twooo</option>
    <option value="3">Three</option>
</select>
<div class="detail">
    <p>Detail</p>
        <br />
    <select id="Select1" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select2" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select3" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select4" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
<br />
    <select id="Select5" name="myddl" >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>    
</div>

Javascript：

 $('.detail').find('select').attr("disabled"); 

$("#myddl").change(function()
{  $('.detail').find('select').removeAttr("disabled"); 
     $('.detail').find('select').val($(this).val());

});

现场演示

4

3 回答 3

2 
var drops = $('.detail select');
var $header = $('#myddl');
$('input[name="approve"]').change(function() {
    $header.prop('disabled', !this.checked);

    if (!this.checked) {
        drops.prop('disabled', true);
    }
});

drops.add($header).prop('disabled', true);

$header.change(function() {
    drops.prop('disabled', false);
});​

现场演示

请注意，此代码缓存select元素，因此不需要多次查询 dom。

于 2012-05-08T18:12:40.117 回答
1

这就是您要查找的内容：

var $ddls = $('select');
var $check = $('#check');
var $ddlHeader = $("#myddl");
var $ddlDetails = $('.detail select');

$ddls.prop("disabled", true); 

$check.click(function() {
    $ddls.prop("disabled", true); 
    $ddlHeader.prop("disabled", !this.checked);
});

$ddlHeader.change(function() {  
    $ddlDetails.removeAttr("disabled"); 
});

演示

于 2012-05-08T18:12:17.973 回答
1

我不太确定这是否是您想要实现的目标http://jsfiddle.net/justelnegro/8SpTk/10/ 

$('.detail select').attr('disabled', true);

$("#myddl").change(function()
{  
    $('.detail select').attr('disabled', false).val($(this).val());
});
于 2012-05-08T18:12:53.403 回答