Fatal编程技术网
  • javascript/
  • Javascript 限制选择的自定义功能不起作用

Javascript 限制选择的自定义功能不起作用

javascript jquery html

Javascript 限制选择的自定义功能不起作用,javascript,jquery,html,Javascript,Jquery,Html,我有一个html表单，有7首带有复选框的歌曲，用户最多只能选择5首歌曲。我创建了一个js函数来实现这一点。如果我选择歌曲并阻止选择第六首歌曲并显示警告消息，效果会很好。 但一旦我选择了5首歌曲，并试图取消选择任何歌曲，它也阻止我们这样做，并显示相同的警报 这是我的HTML标记（对于表格布局很抱歉，这是我客户的选择，他只想要表格，即使我不需要表格也可以） 歌曲1 歌曲2 歌曲3 歌曲4 歌曲5 歌曲6 歌曲7 שלח 和JQuery代码 var apcSongs = { init: f

我有一个html表单，有7首带有复选框的歌曲，用户最多只能选择5首歌曲。我创建了一个js函数来实现这一点。如果我选择歌曲并阻止选择第六首歌曲并显示警告消息，效果会很好。 但一旦我选择了5首歌曲，并试图取消选择任何歌曲，它也阻止我们这样做，并显示相同的警报

这是我的HTML标记（对于表格布局很抱歉，这是我客户的选择，他只想要表格，即使我不需要表格也可以）


歌曲1
歌曲2
歌曲3
歌曲4
歌曲5
歌曲6
歌曲7
שלח
和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();

var=
{
init:function（）{
var sCheckbox=$（“#apc table.song select”）；
变量形式=$（“#apc形式”）；
表格提交（功能（e）{
apcSongs.validateMin（）；
});
sCheckbox.click（函数（e）{
var selectedSongs=$（'apc table'）。查找（'tr.selected'）；
console.log（selectedSongs.length）；
if（selectedSongs.length<5）{
$（this.parent（）.parent（）.toggleClass（'selected'）；
}否则{
提醒（“您不能选择超过5首歌曲”）；
返回错误
}
});
},
validateMin:function（）{
var selectedSongs=$（'apc table'）。查找（'tr.selected'）；
如果（selectedSongs.length==0）
{
警报（“您必须至少选择一首歌曲”）；
返回错误
} 
}
}
apcSongs.init（）；
你可以查一下

请检查我的代码，并告诉我如何处理我的代码，以便在取消选择时不会显示警报。如果您知道一种更好的方法，请告诉我。

单击复选框时，您需要检查它是否已选中。如果选中了复选框，则表示现在正在取消选中它，因此您应该让用户单击。

单击复选框时，您需要检查它是否已选中。如果它被选中，这意味着它现在被取消选中，因此您应该让用户单击。

您可以使用类似的方法

<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>


登录页面
$（文档）.ready（函数（）{
$（“输入[type=checkbox][name=ck]”。单击（函数（）{
如果（$（“输入[type=checkbox][name=ck]：选中”）。长度>5）
{
警报（“您只能选择5”）；
$（this.prop（'checked'，false）；
}
});
});
歌曲1
歌曲2
歌曲3
歌曲4
歌曲5
歌曲6
歌曲7
您可以使用类似的方法

<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>


登录页面
$（文档）.ready（函数（）{
$（“输入[type=checkbox][name=ck]”。单击（函数（）{
如果（$（“输入[type=checkbox][name=ck]：选中”）。长度>5）
{
警报（“您只能选择5”）；
$（this.prop（'checked'，false）；
}
});
});
歌曲1
歌曲2
歌曲3
歌曲4
歌曲5
歌曲6
歌曲7
在您的js中：

替换

   if (selectedSongs.length < 5 ) {

if（selectedSongs.length<5）{
借

if（selectedSongs.length<5 | |！$（this）.is（“：checked”））{
在您的js中：

替换

   if (selectedSongs.length < 5 ) {

if（selectedSongs.length<5）{
借

if（selectedSongs.length<5 | |！$（this）.is（“：checked”））{