-4

私はWebアプリ（PHP）を持っており、この変更を行う必要があります。私はデータベースであり、スクリプト作成者です。これについてはご容赦ください。

フォームに8つのチェックボックス（1〜8の番号が付いていると思います）があります。条件を実装する必要があります：

If one of the first 4 checkboxes are checked (only one checkbox can be checked in the first 4),
Then the next 4 checkboxes should be disabled
Else the next 4 checkboxes should be enabled.

私の解決策：

  • 最初の4つのチェックボックスのラジオボタンを作成して、1つのチェックボックスのみを選択できる状態であることを確認します。
  • 上記のアクションに基づいて、次の4つのチェックボックスを無効/有効にします。したがって、ラジオボタンが選択されていない場合は、次の4つのチェックボックスを選択できるはずです。

jQueryを使用して非表示にするのではなく、実際にチェックボックスを無効にする必要があるため、無効にするとチェックボックスは灰色（チェック不可）になります。

サンプルコード（同様の解決策を探している他の人のためにいくつかのフォーマットの混乱を取り除いた）：

        <div>
            <input type="checkbox" name="check1" value="1" id="check1" <?php if (!empty($rows['check1'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check2" value="1" id="check2" <?php if (!empty($rows['check2'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check3" value="1" id="check3" <?php if (!empty($rows['check3'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check4" value="1" id="check4" <?php if (!empty($rows['check4'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check5" value="1" id="check5" <?php if (!empty($rows['check5'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check6" value="1" id="check6" <?php if (!empty($rows['check6'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check7" value="1" id="check7" <?php if (!empty($rows['check7'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check8" value="1" id="check8" <?php if (!empty($rows['check8'])) { echo 'checked="checked"'; } ?> />
        </div>

私のリクエスト：

  • これを行う最も効率的な方法は何ですか？（問題を複雑にすることなく簡単に）
  • サンプルコードは大歓迎です。
4

4 に答える 4

1

これがあなたが探しているものだと思います。.index（）を使用してこれを実現し、現在クリックされているチェックボックスを取得できます。 .slice（）は、インデックス4以降のすべての要素を取得するために使用されます。

$('input[type=checkbox]').change(function(){
    var $linputs =  $('input[type=checkbox]').slice(4);
    var $this = $(this);    
    $linputs.prop('disabled',($this.index() < 4 && this.checked));        
    if($this.index() < 4 && this.checked){
        $linputs.prop('checked',false);
    }
});​

FIDDDLE

それともこのようなものが欲しいですか？最初の4つのチェックボックスのうち1つだけをチェックできる場合。1つをチェックすると、他のすべてが無効になります。 

$('input[type=checkbox]').change(function(){
    var $this = $(this);    
    $(linputs).prop('disabled',($this.index() < 4 && this.checked));        
    if($this.index() < 4 && this.checked){
        $(linputs).prop('checked',false);
    }
});​

http://jsfiddle.net/h5wDr/

編集：

ページに他のチェックボックスがあり、それらをこのロジックから分離できるようにしたい場合は、セレクターにコンテキストを追加して、このコードをこのdiv内のチェックボックスのみに分離することができます。

<div id='test'>
                <input type="checkbox" name="check1" value="1" id="check1" >first
            <input type="checkbox" name="check2" value="1" id="check2" >second
            <input type="checkbox" name="check3" value="1" id="check3" >third
            <input type="checkbox" name="check4" value="1" id="check4" >fourth
            <input type="checkbox" name="check5" value="1" id="check5" >fifth
            <input type="checkbox" name="check6" value="1" id="check6" >sixth
            <input type="checkbox" name="check7" value="1" id="check7" >seventh
            <input type="checkbox" name="check8" value="1" id="check8" >eight
</div>

次に、コンテキストを追加するだけです

var $inputs = $('input[type=checkbox]', $('#test')); 
// this will only select checkboxes within the element with id=test

http://jsfiddle.net/h5wDr/2/

于 2012-09-24T15:00:33.887 に答える
1 
      <div>
        <input type="checkbox" name="check1" value="1" id="check1" />
        <input type="checkbox" name="check2" value="1" id="check2"  />
        <input type="checkbox" name="check3" value="1" id="check3"  />
        <input type="checkbox" name="check4" value="1" id="check4"  />
        <input type="checkbox" name="check5" value="1" id="check5"  />
        <input type="checkbox" name="check6" value="1" id="check6"  />
        <input type="checkbox" name="check7" value="1" id="check7"  />
        <input type="checkbox" name="check8" value="1" id="check8"  />
    </div>
<script>
    $(document).ready(function () {

        var $firstFourChecks = $("#check1,#check2,#check3,#check4");
        var $lastFourChecks = $("#check5,#check6,#check7,#check8");

        $firstFourChecks.on('click', function (e) {

            var isCheck = $(this).is(':checked');
            $firstFourChecks.not($(this)).prop('checked', false);
            $(this).prop('checked', isCheck);


            if (isCheck) {
                $lastFourChecks.prop("disabled", true).prop('checked', false);
            } else {
                $lastFourChecks.prop("disabled", false);
            }
        });
    });
</script>

これは完全にjavascriptで行われ、phpを使用しているという事実に依存しません。基本的に、最初の4つで、選択していないことを確認します。これらはfalseに設定されています。次に、クリックしたものの状態を切り替えます。

最初の4つで何かをクリックした場合、最後の4つはオフになり、無効になります。それ以外の場合は、再度有効になります。これは、投稿された擬似コードと一致します。

これを直接貼り付けることができるはずです。速度上の理由から、セレクターはキャッシュされます。

http://jsfiddle.net/L4qeN/こちらをご覧ください。

編集：すごい誰かがほんの数分で私をパンチラインに打ち負かしたように見えます。非常に異なる方法を使用しました。でも。

于 2012-09-24T15:15:40.740 に答える
0

自分で試してみる必要がありますが、私は（javascriptを使用して）次のようなことをします。

  • 最初のグループのすべてのチェックボックスにクラスを追加し、2番目のグループのすべてのチェックボックスに別のクラスを追加します。
  • 最初のクラスの変更イベントを確認し、クリックしたグループを除く最初のグループをすべてオフにします。
  • 最初のグループのいずれかが選択されているかどうかを確認し、それに応じて2番目のクラスグループをアクティブ化/非アクティブ化します。
于 2012-09-24T15:00:04.863 に答える
0

最初の4つのチェックボックスに1つのクラスを与え、次に2番目の4つのチェックボックスに2番目のクラスを与えてonclickから、最初のすべてのチェックボックスにハンドラーを追加します。

$('.firstfour_class').click(
   if $('input:checkbox:checked.firstfour_class').length > 1){
       //code to turn OFF the second four and make them unchecked
   } else {
      //code to turn ON the second four
   }
})

jQuery：checkedselectorをチェックしてください。

于 2012-09-24T15:00:19.233 に答える