选中复选框后交换以选择框 [英] Swap to select box once checkbox is checked
问题描述
我有这些复选框.它们对应于人们上班的日子.该系统将用于创建工作时间表".但是，当老板选中一个复选框(以便某天在某人上班)时，应将其更改为选择框，以便老板可以告诉人们将在哪里工作.
I've got these set of checkboxes. They correspond to the days on which people are available for work. This system will be used to create a 'work schedule'. However, when the boss checks a checkbox (to have people work on that certain day), it should change to a select box so that the boss can tell where people will be working.
复选框通过以下方式获得其名称:{UserID}_[].复选框的值对应于星期几(星期一-> 0，星期二-> 1，星期三-> 2等).选择框是通过以下方式制成的:{UserID}_select_[].
The checkboxes get their name in this way: {UserID}_[]. The value of the checkbox corresponds to the day in the week (Monday -> 0, Tuesday -> 1, Wednesday -> 2 etc.). The select box is made in this way: {UserID}_select_[].
我试图使用以下类型的jquery脚本来使之工作:
I tried to use the following type of jquery script to get this working:
<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，并编写一行代码以隐藏该复选框.虽然..它无法正常工作..
However, I'm quite new to jquery, so I might need some help there. I retrieve a php array from a database to get all the user ID's of which we have an availability. This one is converted to a jquery variable. I try to loop through that to get every single ID and make a line of code to hide the checkbox. Though.. it does not work.. as always...
当我var_dump userIdList php变量时，这是我的结果:
When I var_dump the userIdList php variable, this is my result:
array(3) { [0]=> int(1) [1]=> int(2) [2]=> int(4) }
这意味着用户ID是1、2和4.但是谁能在jquery部分帮助我?
This means the user ID's are 1, 2 and 4. But who can help me with the jquery part?
推荐答案
附加了超级简单的jquery代码，以演示切换复选框时显示/隐藏选择.请注意，我使用id而不是name.没什么其他要考虑的:
attached a super simple jquery code to demo show/hide select when toggling checkbox. Notice I use id instead of name. Few other things to consider:
-
将
.change更改为.click.
将$(document).ready(function()移动到for循环之外，应该
只运行一次.
Move $(document).ready(function() outside of for loop, it should
run once only.
$("#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>
这篇关于选中复选框后交换以选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
