-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

これがあなたが達成したいことであるかどうかはわかりません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 に答える
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 に答える