当我单击复选框时，输入按钮将可单击 - when i click on checkbox than input button will be clickable

when i click on checkbox than input button will be clickable

本文关键字：单击按钮输入复选框 | 更新日期: 2023-09-27

这是我的形式：

<form name="frmUser" method="post" action="">
    <input type="button" name="update" value="Update Booking" id="Update_Booking" onClick="setUpdateAction();" />
    <input type="button" name="delete" value="Cancel Booking" onClick="setDeleteAction();" />
    <input type="checkbox" name="booking[]" id="Booking" value="<?php echo $row['id'];?>" />
</form>

这是脚本代码：

function setUpdateAction() {
    document.frmUser.action = "update_booking_view.php";
    document.frmUser.submit();
}
function setDeleteAction() {
    if (confirm("Are you sure want to delete these rows?")) {
        document.frmUser.action = "delete_booking_view.php";
        document.frmUser.submit();
    }
}

最初需要将禁用属性添加到两个按钮。

单击复选框后，查看它是否已选中。如果选中，按钮将变为可单击。如果未选中，按钮将变为禁用状态。

通过添加禁用属性来修改 HTML：

  <input type="button" name="update" value="Update Booking" id="Update_Booking" onClick="setUpdateAction();" disabled />
  <input type="button" name="delete" value="Cancel Booking" onClick="setDeleteAction();" disabled />

然后你的jQuery：

    $("#Booking").on("click", function() {
       if (this.checked == true) {
          $("input[type='button']").attr('disabled', false);
       } else {
          $("input[type='button']").attr('disabled', true);
       }
    });

你可以参考这个JS小提琴：https://jsfiddle.net/ythw3sv6/

您可以尝试以下操作：

PS：您需要防止提交表单的按钮单击的默认行为。

.JS：

function setUpdateAction(event) {
    event.preventDefault();
    document.frmUser.action = "update_booking_view.php";
    document.frmUser.submit();
}
function setDeleteAction(event) {
    event.preventDefault();
    if (confirm("Are you sure want to delete these rows?")) {
        document.frmUser.action = "delete_booking_view.php";
        document.frmUser.submit();
    }
}
function toggleBtns(checkbox) {
    checkbox.form.update.disabled = checkbox.form.delete.disabled = !checkbox.checked;
}

.HTML：

<form name="frmUser" method="post" action="">
    <input type="button" disabled name="update" value="Update Booking" id="Update_Booking" onClick="setUpdateAction(event);" />
    <input type="button" disabled name="delete" value="Cancel Booking" onClick="setDeleteAction(event);" />
    <input type="checkbox" name="booking[]" onchange="toggleBtns(this)" id="Booking" value="<?php echo $row['id'];?>" />
</form>

演示：https://jsfiddle.net/iRbouh/jjhm2mnr/2/