0

写真に示されている1 つ以上のセレクター (動的に生成されたもの) が空の場合、送信ボタンを無効にしようとしています。

http://i.stack.imgur.com/t4nng.png

次のjQueryコードを試しました：

    <script>

    var $submit = $("input[name=store_values]");
    $(".ownlevelselect").each(function(){
    if($(".ownlevelselect:empty").length>0){
        $submit.attr("disabled","disabled");
    }else {
        $submit.removeAttr("disabled");
    }
    });

</script>

これらは私のフォームの関連部分です：

   echo "<select class='ownlevelselect' id='ownlevelselect' name='level-".$compi['Competence_ID']."' >";

および入力ボタン:

   echo "<input type='submit' name='submit_values' value='Save'>";
  echo "<input type='submit' name='store_values' value='Store'></form>";

無効にしたいのはname='store_values'

4

2 に答える 2

1

あなたの質問にはあいまいなことがあります.DOMの空のような空(要素を含まない選択)または空の値が選択された選択のような空のことを意味しますか?

empty valueのように空を意味する場合は、Shadow Wizard が言ったように変更イベントを処理して、これを試すことができます。

$('document').ready(function(){

    var submitButton = $('input[name="store_values"]');
    /* Called to disable button on page load, done here but probably possible server-side */
    checkValues()

    /* Called on change event on dropdowns */       
    $('select.ownlevelselect').on('change',function(){
        checkValues();
    });

    function checkValues(){
        /* Disable button if found an empty <select> (mean, no <option> inside), or a select with an empty value selected */
        submitButton.prop('disabled',$(".ownlevelselect > option:selected[value=''],.ownlevelselect:empty").length > 0);
    }
});

「Dom empty」(選択内でオプションが定義されていない) のように空のことを意味する場合は、これを試すことができます (関数に配置して、要素を動的に追加するたびに呼び出すことができます)。

$('document').ready(function(){
    var submitButton = $('input[name="store_values"]');
    submitButton.prop('disabled',$(".ownlevelselect:empty").length > 0);
});

編集

ID に注意してください。コードの関連部分は確かにありませんが、選択に同じ ID を再利用しているようです。これは悪い考えです :)

EDIT2

ここにフィドルがあります。何かを見逃したかどうかがわかります: http://jsfiddle.net/d8rb9/

于 2013-04-18T09:31:33.270 に答える
-1

選択ごとにイベント onBlur を使用して、他のすべての選択が空でないかどうかをテストする関数をトリガーし、そうであれば送信ボタンをアクティブにすることができます。

例を次に示します。

選択タグ:

<select class="ownLevelSelect" onBlur="checkSelects()">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

Javascript 関数:

<script>
    function checkSelects(){

        // integer to count the number of select with a correct value
        var nonEmpty = 0;

        // loop on all the select in the page with the class attribute : "ownLevelSelect"
        $('.ownLevelSelect').each(function(){
            if($(this).val()) {
                nonEmpty++;
            }
        });

        //desactivate the submit button if the number of selects in the page <> nonEmpty
        ($('.ownLevelSelect').length == nonEmpty)? $('#theSubmit').removeAttr("disabled") : $('#theSubmit').attr("disabled","disabled");
                }
</script>

フィールドの1つが空の場合、デフォルトでボタンが無効になるように、ページの読み込み時にこの関数を呼び出す必要があるかもしれません

<script>
    $(document).ready(function() {
        checkSelects();
    });
</script>

注 : ID 属性はページ上で一意である必要があるため、コードで次のように変更します。

<select class='ownlevelselect' id='ownlevelselect' name='level-".$compi['Competence_ID']."' >";

By this : 

<select class='ownlevelselect' id='ownlevelselect-".$compi['Competence_ID']."' name='level-".$compi['Competence_ID']."' >";

これが役に立ったことを願っています。

于 2013-04-18T09:28:30.060 に答える