选中复选框后切换到选择框答案

【问题标题】：Swap to select box once checkbox is checked选中复选框后切换到选择框
【发布时间】：2017-10-30 18:26:38
【问题描述】：

我有这些复选框。它们对应于人们可以工作的日子。该系统将用于创建“工作计划”。然而，当老板选中一个复选框（让人们在那一天工作）时，它应该变成一个选择框，以便老板知道人们将在哪里工作。

复选框以这种方式命名：{UserID}_[]。复选框的值对应于一周中的某一天（星期一 -> 0、星期二 -> 1、星期三 -> 2 等）。选择框是这样制作的：{UserID}_select_[]。

我尝试使用以下类型的 jquery 脚本来使其正常工作：

<script>
    var userList = <?php echo json_encode($userIdList); ?>;

    function swapInput(obj) {
        for (var i in obj) {
            $(document).ready(function() {
                $("input[name='" + obj[i] + "_[]']").change(function() {
                    if ($(this).prop('checked')) {
                        $(this).hide();
                        $('input[name="' + obj[i] + '_select_['$(this).val()']"]').show();
                    }
                }
            }
        }
    }

    swapInput(userList);

</script>

但是，我对 jquery 还很陌生，所以我可能需要一些帮助。我从数据库中检索一个 php 数组，以获取我们可以使用的所有用户 ID。这个被转换为一个 jquery 变量。我尝试遍历它以获取每个 ID 并制作一行代码来隐藏复选框。虽然..它不起作用..一如既往...

当我 var_dump userIdList php 变量时，这是我的结果：

array(3) { [0]=> int(1) [1]=> int(2) [2]=> int(4) }

这意味着用户 ID 是 1、2 和 4。但是谁能帮我处理 jquery 部分？

【问题讨论】：

标签： php jquery checkbox onchange

【解决方案1】：

附加了一个超级简单的 jquery 代码来演示切换复选框时的显示/隐藏选择。注意我使用id 而不是name。其他几件需要考虑的事情：

将.change 更改为.click。
将 $(document).ready(function() 移出 for 循环，它应该只运行一次。

$("#check").click(function(e) {
  if ($(this).prop("checked")) {
    $(this).hide();
    $("#select").show();
  }
})

#select {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="checkbox" id="check">
<select id="select">
  <option>Testing</option>
</select>
</body>
</html>

【讨论】：