Question

如果取消选中复选框，我想禁用并清除文本框，并在选中时启用它。同时，复选框应该取决于数据库上的值。

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

value属性不能用于根据数据库值保留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 3

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

使用this.checked代替$(".dedstat").is(":checked")，以便它是特定于上下文的
使用ID选择器而不是类
你可以链接你的jQuery方法，这样你就可以同时禁用输入并清空它的值
收听change个活动而不是click个<input>元素

＆＃13;

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

＆＃13;

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

＆＃13;

如果希望在pageload上评估输入的状态，则还必须执行相同的逻辑而不将其绑定到onChange事件。最好的方法是创建一个由onChange事件和DOMready / window.load事件调用的函数。在下面的示例中，我们创建的方法将接受DOM节点作为参数，以便从上下文中了解您所引用的复选框元素：

＆＃13;

// 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]);

＆＃13;

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

＆＃13;

关于你的PHP，你可以简单地使用tenary运算符有条件地将checked prop写入你的输入元素，即：

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

Answer 4

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

另外我只是注意到了一些事情：

$（＆＃34; .dedstat＆＃34;）＆lt; =你用点来调用一个类。你的投注有ID。

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

应该会好一点。

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

4 个答案: