取消选中复选框时如何禁用 PHP 禁用和清除文本框。根据数据库选中/取消选中复选框

Question

如果复选框未选中，我想禁用和清除文本框，并在选中时启用它。同时，checkbox应该依赖于数据库上的值。

• 如果deductstatus == 1，加载时应选中复选框
• 如果deductstatus == 2，加载时复选框应取消选中

下面的代码不起作用。有什么帮助吗？

$(".dedstat").click(function() {
  if ($(".dedstat").is(":checked")) {
    $(".deductto").removeAttr("disabled")
  } else {
    $(".deductto").attr("disabled", "disabled")
    var deductto = document.getElementById("deductto");
    deductto.value = "";
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="dedstat" id="dedstat" value="<?php if ($dedstat == 1) echo 'checked'; ?>">
<input type="text" name="deductto" id="deductto" value="<?php echo $deductto;?>">

Answer 1

checked不是值，是属性，应该是：

<input type="checkbox" name="dedstat" id="dedstat" value="" <?php if ($dedstat == 1) echo 'checked'; ?>>

Answer 2

在处理checked、disabled、multiple 等布尔属性时，您应该使用.prop() 而不是.attr() 或.removeAttr()。其他一些改进建议：

• 使用this.checked 而不是$(".dedstat").is(":checked")，以便它是特定于上下文的
• 使用 ID 选择器代替类
• 您可以链接您的 jQuery 方法，因此您可以同时禁用输入并清空其值
• 收听change 事件而不是click 以获取<input> 元素

$("#dedstat").change(function() {
  if (this.checked) {
    $("#deductto").prop("disabled", false)
  } else {
    $("#deductto")
      .prop("disabled", true)
      .val('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="dedstat" id="dedstat">
<input type="text" name="deductto" id="deductto">

如果您希望在页面加载时评估输入的状态，您还必须执行相同的逻辑而不将其绑定到onChange 事件。最好的方法是创建一个由onChange 事件和DOMready/window.load 事件调用的函数。在下面的示例中，我们创建的方法将接受一个 DOM 节点作为参数，因此它可以根据上下文知道您指的是哪个复选框元素：

// Method to conditionally enable/disable input
var updateTextInput = function(el) {
  if (el.checked) {
    $("#deductto").prop("disabled", false)
  } else {
    $("#deductto")
      .prop("disabled", true)
      .val('');
  }
}

// Call method when change event is fired from checkbox
$("#dedstat").change(function() {
  updateTextInput(this);
});

// Call method on DOMready, pass DOM node (not the jQuery object)
updateTextInput($('#dedstat')[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="dedstat" id="dedstat">
<input type="text" name="deductto" id="deductto">

关于您的 PHP，您可以简单地使用三元运算符有条件地将 checked 属性写入您的输入元素，即：

<input type="checkbox" name="dedstat" id="dedstat" <?php echo $dedstat == 1 ? 'checked' : ''; ?>>

Answer 3

value 属性不能用于根据数据库值保留checked 或unchecked。并分别绑定checked或unchecked属性。 所以像这样改变那个标签：

<input type="checkbox" name="dedstat" id="dedstat" onclick="isChecked()" value="1" <?php echo (isset($dedstat) && $dedstat == 1)? "checked" : "" ; ?>

更多关于这个， 如果要存储 1 和 2 值分别保存复选框的选中和未选中条件，那么你应该做的是，如果选中复选框，你将在 php $_POST 中获取它的值，但如果没有选中，你不会在 $_POST 中得到它。因此，在这种情况下，您应该将其默认值 2 存储到 DB 列中。那么只有你下次从 DB 获取它的值时才能得到 2。

Answer 4

只是一点建议： 你的JS在页面底部吗？

另外我刚刚注意到一些事情：

$(".dedstat")

$("#dedstat").click(function () {
    if ($("#dedstat").is(":checked")) {
        $("#deductto")
            .removeAttr("disabled")
    }
    else {
        $("#deductto")
            .attr("disabled", "disabled")
            var deductto = document.getElementById("deductto"); 
            .deductto.value = "";
    }
});

应该会更好一点。