Question

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

以下是我尝试的代码：

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());

});

Live DEMO

Answer 1

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);
});

Live DEMO

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

Answer 2

这就是你要找的东西：

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"); 
});

DEMO

Answer 3

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

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

$("#myddl").change(function()
{  
    $('.detail select').attr('disabled', false).val($(this).val());
});

如何使用JQUERY在更改事件上启用下拉列表？

3 个答案: