Question

有一个简单的问题但是对于菜鸟，我看不出问题是什么。基本上，我试图禁用一个提交按钮，直到选中一个复选框（几个复选框作为从MySQL获取的数据）。但是，尝试了多种变化并且没有运气。已复制到下面 - 有没有人有任何想法？

Answer 1

这是我做的一个简单的小提琴：

var checkbox = $('input[type="checkbox"]');
var button = $('#check');

if(checkbox.is(':checked')){  
  button.removeProp('disabled');
}else{  
  button.prop('disabled', 'disabled');
}

checkbox.on('change', function(){
 if(checkbox.is(':checked')){  
  button.removeProp('disabled');
}else{  
  button.prop('disabled', 'disabled');
} 
});

已修改为包含多个复选框

Answer 2

<form action='something' method='POST'>
   <input type='checkbox' name='chk' value='1' id='check'>
   <input type='submit' name='submit' disabled='disabled'>
</form>



 <script>
    $('#check').click(function(){
          if($(this).prop('checked') == true){
             $('input[type="submit"]').prop('disabled', false);
          }else{
               $('input[type="submit"]').prop('disabled', true);
        }
     });
    </script>

请试一试。

Answer 3

您应确保您的复选框具有唯一的id，因此请在查询中添加数字，就像您对该值所做的那样：

<input type="checkbox" name="Seat[]"
       id="Seat<?php echo $row['SeatNo'];?>"
       value="<?php echo $row['SeatNo'];?>"
       onclick="checkThis();updateTextArea();updatePrice();submit();"/>

假设您希望至少选中一个复选框以启用提交按钮，请使用复选框组上的is(':checked')调用来检查是否至少选中了一个复选框。如果未选中任何选项，请禁用您的按钮，否则启用它：

$(function() {
    function setSubmitAvailability() {
        // disable button when no checks, otherwise enable:
        $('#check').prop('disabled', 
            !$("[name=Seat\\[\\]]").is(':checked')
        );
    }
    // call on check box click:
    $("input[name=Seat\\[\\]]").click(setSubmitAvailability);
    // call also on page load:
    setSubmitAvailability();
});

请注意，您要按名称选择复选框元素，以便检测其中任何一个的复选框。因此，您不要使用#，而是使用[name=...]选择器。此外，括号是选择器中的保留字符，因此您需要将它们转义。由于反斜杠也是Javscript字符串中的转义字符，因此需要加倍。

在上面的代码中，接近结尾时，我也会在页面加载时立即调用该函数，以便在页面加载时正确设置提交按钮的可用性。这是必要的，因为某些浏览器会在您重新加载页面时选中复选框。因此，如果不查看页面加载时的检查，就不能假设按钮的一个或另一个设置。

由于您没有提供onclick处理程序中发生的代码，因此可能还需要更改其他内容才能使其正常工作。但是没有那些处理程序，上面的代码就可以工作。

这是fiddle。

Answer 4

只需在输入类型“提交”中写入禁用

 <input type="submit" name="submit" value="Make Booking" id="check" disabled>

然后复制代码

<script>
$(function() {
                $('#Seat').click(function() {
                    if ($(this).is(':checked')) {
                    $('#check').removeAttr('disabled');

                } else {
                     $('#check').attr('disabled', 'disabled');
                }
            });
        });
</script>

禁用提交直到选中复选框

4 个答案: