1

チェックボックス付きの 7 曲の HTML フォームがあります。ユーザーは最大 5 曲しか選択できません。これを行うためのjs関数を作成しました。曲を選択して6番目の曲を選択しないようにして警告メッセージを表示するとうまくいきます。しかし、5 曲を選択して任意の曲の選択を解除しようとすると、それができなくなり、同じアラートが表示されます。

これが私のHTMLマークアップです（表のレイアウトについては申し訳ありませんが、これは私のクライアントの選択です。表なしで同じことができるとしても、彼は表のみを望んでいます）

  <form id="apc-form" dir="rtl" method="post" action="ap-contact-form.php">
     <table id="apc-table">
        <tbody>
            <tr>
            <td class="song-checkbox"><input type="checkbox" class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 1</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" class="song-select"></td>
            <td class="song-icon"></i></td>
            <td class="song-name">Song 2</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 3</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 4</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 5</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 6</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 7</td>
          </tr>
        </tbody>
      </table>
    </div>
    <button id="submit" type="submit">שלח</button>
  </form>

および JQuery コード

var apcSongs =
{
    init: function() {
        var sCheckbox = $('#apc-table .song-select');
        var form = $('#apc-form');

        form.submit(function(e) {
      apcSongs.validateMin();
    });

        sCheckbox.click(function(e) {
            var selectedSongs = $('#apc-table').find('tr.selected');
            console.log(selectedSongs.length);
        if (selectedSongs.length < 5) {
      $(this).parent().parent().toggleClass('selected');
        } else {
            alert('You can\'t choose more than 5 songs');
            return false
        }
    });

    },
    validateMin: function() {
        var selectedSongs = $('#apc-table').find('tr.selected');
        if (selectedSongs.length == 0) 
        {
            alert('You must select at least 1 song');
            return false
        } 
    }
}

apcSongs.init();

このjsbinを確認できます

コードを確認して、選択解除時にアラートが表示されないように、コードで何ができるか教えてください。これを行うバッターの方法を知っている場合は、教えてください。

4

3 に答える 3

2

チェックボックスをクリックすると、チェックされているかどうかを確認する必要があります。チェックされている場合は、チェックが解除されていることを意味するため、ユーザーにクリックさせる必要があります。

于 2013-10-28T15:25:12.800 に答える
1

このようなものを使用できます

<html>
<head><title>Login page</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
   $(document).ready(function(){
   $("input[type=checkbox][name=ck]").click(function() {

   if( $("input[type=checkbox][name=ck]:checked").length > 5)
   {

    alert("You can select only 5");
    $(this).prop('checked', false);

}

});
});
    </script>
<body>
 <table id="apc-table">
        <tbody>
            <tr>
            <td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 1</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" name="ck"  class="song-select"></td>
            <td class="song-icon"></i></td>
            <td class="song-name">Song 2</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" name="ck"  class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 3</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" name="ck"  class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 4</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" name="ck"  class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 5</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" name="ck"  class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 6</td>
          </tr>
            <tr>
            <td class="song-checkbox"><input type="checkbox" name="ck"  class="song-select"></td>
            <td class="song-icon"></td>
            <td class="song-name">Song 7</td>
          </tr>
        </tbody>
      </table>
</body>
</html>
于 2013-10-28T15:27:36.517 に答える
1

あなたの js で：

交換

   if (selectedSongs.length < 5 ) {

に

  if (selectedSongs.length < 5 ||  ! $(this).is(':checked')) {
于 2013-10-28T15:30:06.633 に答える