複数のSelectフィールドで一意の特定の値を検証する必要があります

Question

私はドロップダウンフィールドのセットを持つフォームを持っています。それぞれのフィールドのデフォルト値は「0」で、使用可能な値は1-3です。これらは、ユーザーが上位3項目を選択する優先順位選択として機能します。それぞれの選択フィールド名はユニークで、PHPのforeachループで実装されています - 私は以下の例では "N"と呼んでいます。

<select class="variable_priority unique required" name="select-N"> 
    <option value="0"></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

"0"の値は、優先順位なしの選択のデフォルト/プリセット値として使用されます。私はまだ検証する必要がある、しかし

$('.variable_priority').each(function() { 
      if ($(this).val() === value && $(this).val() > 0) { 
       timeRepeated++; 
      } 
     }); 

：技術described hereを使用して、私は正常クラス「variable_priority」を比較することによって、ユーザーが複数のドロップダウンに1、2または3を選択することができないことを保証するためにjQueryの検証を変更しましたユーザーが実際に選択フィールドのいずれかに1,2および3の値を入力し、スキップしていないことを確認します。誰も私にJQueryの検証のコンテキスト内でこれを行う方法に関するいくつかのガイダンスを与えることができますか？

Answer 1

JSフィドルで要件を再作成した後。 http://jsfiddle.net/halfcube/aLvc6/

私はあなたの条件にこの多分もっと近いと思う

HTML

<div class="selects"> 
    <select class="variable_priority unique required" name="select[]" required> 
     <option value="0">Select</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <select class="variable_priority unique required" name="select[]" required> 
     <option value="0">Select</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <select class="variable_priority unique required" name="select[]" required> 
     <option value="0">Select</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <select class="variable_priority unique required" name="select[]" required> 
     <option value="0">Select</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
</div> 
<div class="value"> 
    0 
</div> 

CSS

.valid{ 
    box-shadow:0 0 10px green; 
    -webkit-box-shadow:0 0 10px green; 
    -moz-box-shadow:0 0 10px green; 
} 

JavaScriptを今すぐ

$(document).ready(function() { 

    function checkSelected(val) { 
     var ret = false; 
     $(".variable_priority").each(function() { 
      if ($(this).val() === val) { 
       ret = true; 
      } 
     }); 
     return ret; 
    } 

    function totalValue() { 
     var total = 0; 
     $(".variable_priority:first option[value!=0]").each(function() { 
      total = total + parseInt($(this).val(), 10); 
     }); 
     return total; 
    } 
    function totalSelectedValue(){ 
     var total = 0; 
     $(".variable_priority option:selected").each(function() { 
      total = total + parseInt($(this).val(), 10); 
     }); 
     return total; 
    } 
    $('.value').html(totalValue()); 
    $('.variable_priority').change(function() { 
    //  variable_priority = variable_priority + parseInt($(this).val(), 10); 
     $('.value').html(totalSelectedValue() + " out of " + totalValue()); 

     $('option', this).each(function() { 
      if (checkSelected($(this).val()) && $(this).val() !== "0") { 
       $('.variable_priority option[value=' + $(this).val() + ']').attr('disabled', true); 
      } else { 
       $('.variable_priority option[value=' + $(this).val() + ']').removeAttr('disabled'); 
      } 
     }); 
     if (totalSelectedValue() === totalValue()) { 
      $('.selects').removeClass('invalid').addClass('valid'); 
     } else { 
      $('.selects').removeClass('valid').addClass('invalid'); 
     } 
    }); 
}); 

私は戻って取得する必要があります仕事。

はこれを試してみてください

Answer 2

私はまずブラウザーでほとんどの作業を行いますので、良いメッシュにはrequireddisabledとselectedのようなHTML5属性を使用します。

あなたはこのようなことを試すことができます。

<select class="variable_priority unique required" name="select-N" required> 
    <option value="0" disabled></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

これにより、ユーザーは、彼らが再びblankを選択することはできませんオプションを選択すると、ブラウザは、デフォルト値としてblankを表示することを可能にするために十分でなければなりません。

安全なメッシュのために、フォームが有効であることを確認するために、フォーム送信イベントにバインドされたJavaScriptサイド検証を行います。

このようなものです。

$("form").bind("submit",function(){ 
    if($("select.variable_priority :selected").length >= $("select.variable_priority").length){ 
    return true; 
    }else{ 
    return false; 
    } 
}); 

この文は、ページ上のドロップダウンの合計数と比較しselectedドロップダウンのカウントをチェックする場合。一致した場合、フォームは有効です。

私はこれがあなたを助けてくれることを願っています。

Answer 3

を楽しむ：

<script>$(document).ready(function() { 
$('select').change(function() { 
    $('option[value=' + $(this).val() + ']').attr('disabled', 'disabled'); 
}); 

}）;