在选中复选框之前禁用提交

Question

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

Answer 1

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

您应该确保您的复选框具有唯一性 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();
});

请注意，您想要 select 复选框元素的名称，以便检测其中任何一个的检查。那么你就不用#，而是[name=...] select 或者。另外，括号在selector中是保留字符，需要转义。由于反斜杠也是 Javscript 字符串中的转义字符，因此您需要将其加倍。

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

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

这里是fiddle.

Answer 3

just write disabled in input type Submit

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

Answer 4

这是我制作的简单 fiddle：

fiddle

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');
} 
});

编辑为包含多个复选框

在选中复选框之前禁用提交

Disable Submit until checkbox is selected

javascript

forms

checkbox

submit