禁用提交按钮直到复选框被选中

Question

我有一个简单的问题，但作为一个新手，我看不出问题在哪里。基本上，我试图在多个复选框中选择数据（从MySQL中获取），直到选择了一个复选框，禁用提交按钮。然而，我尝试了多种变化，但没有成功。下面是我复制的代码，请问有什么建议吗？

- user5626896

---

当复选框上有一个调用提交的onclick处理程序时，禁用提交按钮没有太多用处... - trincot

请查看这个fiddle，但是你有一个#Seat的问题。你知道在DOM中不能有多个id，另一个问题是你绑定了（我相信）不止一个复选框，因为我注意到name="Seat[]"。 - Adam Azad

你应该使用php标签来标记你的问题，因为你包含了php代码。 - trincot

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>

请尝试这个。

- int soumen

Answer 2

这是我制作的一个简单的fiddle：

fiddle

（注：保留html标签，不翻译）

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

编辑以包括多个复选框

- OpuLance

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。

- trincot

Answer 4

只需要在提交按钮的输入类型中写入“disabled”

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

- Tanmay