2

かなり単純だと思いますが、残念ながら私は JavaScript をまったく知らず、既存の解決策を見つけることができませんでした。

<input type='checkbox' class='group1' name='1'> Name1<br>    
<input type='checkbox' class='group1' name='2'> Name2<br>     
<input type='checkbox' class='group1' name='3'> Name3<br><br>   
<input type='checkbox' class='group2' name='4'> Name4<br>    
<input type='checkbox' class='group2' name='5'> Name5<br>

そのため、、、またはいずれも選択されていない場合はName1、無効にする必要があります。Name2Name3Name4Name5

よろしくお願いします！

私のページにはすでに jQuery が < head > セクションに含まれているため、このライブラリを必要とするバリアントを使用することにしました。そこで、 Wing Leongが提供したコードを試してみましたが、成功しました。ただし、次の 2 つの欠点があります。

  1. 無効になっているチェックボックスは明示的にオフに設定する必要があることを忘れていました。現在の実装では、2 番目のグループ (たとえば、Name4) のチェックボックスの 1 つを選択し、最初のグループのすべてのチェックボックスのチェックを外すと、Name4無効になりますが、チェックされたままになります。フォームを処理するサーバーは選択されたオプションとして受け入れるため、これは完全に間違っていName4ます。そうでない場合、ユーザーは混乱する可能性があります。

  2. このページには、ユーザーが「すべてチェック」というチェックボックスを選択すると、最初のグループのすべてのチェックボックスが自動的に選択される別の jQuery スクリプトがあります。ここにあります：

    <input type='checkbox' id='maincb'> Check all

そしてこれのためのJavaScript：

<script type="text/javascript">    
    $(document).ready( function() {       
     $("#maincb").click( function() {    
if($('#maincb').attr('checked')) {    
    $('.group1:enabled').attr('checked', true);    
} else {    
    $('.group1:enabled').attr('checked', false);    
}    
});    
    });    
</script>

問題は、これら 2 つのスクリプトがうまく機能しないことです。group1クラスを「すべてチェック」チェックボックスに割り当てた後でも、2番目のグループのチェックボックスには影響しません。

4

4 に答える 4

1

このような仕事をしたいですか？

http://jsfiddle.net/steelywing/MtDLB/1/

$('#check_group1').click(function () {
    $('.group1:enabled').prop('checked', $(this).prop('checked'));
    updateButton();
});

function updateButton() {
    if ($('.group1:checked').length == 0) {
        $('.group2')
            .prop('disabled', true)
            .prop("checked", false);
    } else {
        $('.group2').prop('disabled', false);
    }
}

$('.group1').change(function () {
    updateButton();
});

updateButton();
于 2013-04-11T12:05:35.533 に答える
1

HTML

<input type='checkbox' class='group1' name='1'> Name1<br>    
<input type='checkbox' class='group1' name='2'> Name2<br>     
<input type='checkbox' class='group1' name='3'> Name3<br><br>   
<input type='checkbox' class='group2' name='4'> Name4<br>    
<input type='checkbox' class='group2' name='5'> Name5<br>

JavaScript (純粋、jQuery なし)

function checkFields() {
    var inputs = document.getElementsByTagName('input');

    if (inputs.length == 5) {
        if (inputs[0].checked == true || inputs[1].checked == true || inputs[2].checked == true) {
            inputs[3].disabled = false;
            inputs[4].disabled = false;
        }
        else {
            inputs[3].disabled = true;
            inputs[4].disabled = true;
        }
    }
}

// On-load
checkFields();

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('click', function() {
        checkFields();
    });
}

にイニシャルを入れる場合がありcheckFields();ます<body onload="">。document.getElementsByTagName('input');また、ページ上の他の入力フィールドと誤って一致しないように、ID を持つ親ラッパーの をターゲットにする必要があることに注意してください。

HTML

<form id="wrappingForm">
    <input type='checkbox' class='group1' name='1'> Name1<br>    
    <input type='checkbox' class='group1' name='2'> Name2<br>     
    <input type='checkbox' class='group1' name='3'> Name3<br><br>   
    <input type='checkbox' class='group2' name='4'> Name4<br>    
    <input type='checkbox' class='group2' name='5'> Name5<br>
</form>

JavaScript

var wrapper = document.getElementById('wrappingForm');
var inputs = wrapper.getElementsByTagName('input');
于 2013-04-11T12:10:58.963 に答える
0

Jquery はオプションですか? もしそうなら、それは非常に簡単です...

    $('input').click(function() {

        if ($('.group1').is(':checked')) {
             $('.group2').attr('disabled', 'disabled');  
        } else {
            $('.group2').removeAttr('disabled');
        }

    });

デモ

于 2013-04-11T12:06:11.150 に答える
0 
<script type=text/javascript>
function clk(){
if (op1.checked == 1 && op2.checked == 1 && op3.checked == 1){
          op4.checked=1 ;
          op5.checked=1 ;
}
}
</script>


<input type='checkbox' class='group1' onclick="clk()" name='op1'> Name1<br>    
<input type='checkbox' class='group1' onclick="clk()" name='op2'> Name2<br>     
<input type='checkbox' class='group1' onclick="clk()" name='op3'> Name3<br> 
<input type='checkbox' class='group2' name='op4'> Name4<br>    
<input type='checkbox' class='group2' name='op5'> Name5<br>
于 2013-04-11T12:18:49.520 に答える