Question

我想在表单按钮中隐藏提交，除非至少选中了一个复选框。以下是我的观点样本

＆＃13;

$(document).ready(function() {
  $('input[type=checkbox]').click(function() {
    if ($("#radiobutton :checked") {
      $('#next-container').toggle();
    } else {
      $('#next-container').hide()
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked name="radio" id="radio">

<div id="nxtbutton">
  <div id="next-container">
    <button class="card__btn btn" id="nxtBtn" type="button">Next</button>
  </div>
</div>

＆＃13;

Answer 1

检查change事件处理程序中复选框的长度，如果选中，则显示按钮

$(document).ready(function() {
   var boxes = $(' input[type=checkbox]').on('change', function() {
    var flag = boxes.filter(':checked').length > 0;

    $('#next-container').toggle(flag);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked name="radio" id="radio">
<input type="checkbox" checked name="radio" id="radio">
<input type="checkbox" checked name="radio" id="radio">
<input type="checkbox" checked name="radio" id="radio">
<br />
<div id="nxtbutton">
  <div id="next-container">
    <button class="card__btn btn" id="nxtBtn" type="button">Next</button>
  </div>
</div>

Answer 2

使用复选框按钮.prop('checked')检查是否已选中。当其中一个复选框具有onchange事件并维护计数器时，循环遍历每个复选框。

＆＃13;

$(document).ready(function(){
  
 $('#nxtBtn').hide();
 $(' input[type="checkbox"]').on('change', function () {
   var count = 0;
               $(' input[type="checkbox"]').each(function(){
                 if($(this).prop('checked')) {
                   count++;
                   return;
                 }
                 
               })
               if(count > 0) {
                 $('#nxtBtn').show();
               }
   else {
      $('#nxtBtn').hide();
   }
         });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="checkbox"  name="radio" />
<input type="checkbox"  name="radio" />
<input type="checkbox"  name="radio" />


    <div id="nxtbutton">
             <div id="next-container">
             <button  class="card__btn btn" id="nxtBtn" type="button" >Next</button>
             </div>
             </div>

＆＃13;

Answer 3

您需要在页面加载时隐藏按钮。

JS

document.getElementById('nxtBtn').style.visibility = 'hidden';

visibility=hidden 非常有用，但它仍会占用页面上的空间。您也可以使用display=none

或者，试试CSS：

display:block或display:none

另外，将if($("#radiobutton :checked"){更改为if($("#radiobutton :checked")){。你错过了一个括号。

Answer 4

我在我的网站上经常使用它。简短而甜蜜，但都是客户方。

＆＃13;

$(document).ready(function(){
 $('#nxtBtn').hide(); 
 $('#radio').mouseup(function () {
    $('#nxtBtn').toggle();
 });
});

＆＃13;

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<input type="checkbox" name="radio" id="radio">
<button class="card__btn btn" id="nxtBtn" type="button">Next</button>

＆＃13;

除非选中复选框，否则请隐藏按钮

4 个答案: