Swap to select box once checkbox is checked


<a href="https://i.stack.imgur.com/teZ0v.png" rel="nofollow"><img alt="Checkboxes" class="b-lazy" data-src="https://i.stack.imgur.com/teZ0v.png" data-original="https://i.stack.imgur.com/teZ0v.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

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.

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_[].

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>

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

When I var_dump the userIdList php variable, this is my result:

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

This means the user ID's are 1, 2 and 4. But who can help me with the jquery part?


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 .change to .click.

</li> <li>

Move $(document).ready(function() outside of for loop, it should run once only.

</li> </ul>

<pre class="snippet-code-js lang-js prettyprint-override">$("#check").click(function(e) { if ($(this).prop("checked")) { $(this).hide(); $("#select").show(); } }) <pre class="snippet-code-css lang-css prettyprint-override">#select { display: none; } <pre class="snippet-code-html lang-html prettyprint-override"><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>


  • Stored data can't access in Yii
  • Is there a MySQL query that can encode to JSON in exactly this way?
  • FCM on app closed
  • Displaying a list of videos from a channel - Vimeo Advanced API
  • Creating JS objects in PHP with commas in between
  • Using SWIG with a build system [closed]
  • force json_encode to create strings
  • node.js POST request fails
  • Google OAuth: can't get refresh token with authorization code
  • PHP Listener Script for Paypal Webhooks
  • What Makes These Two Array Adds Different?
  • How to load gif image while ajax content is loading and javascript [duplicate]
  • Using a canvas object in a thread to do simple animations - Java
  • Stop Bash Script if Hive Fails
  • Install PHP intl extension on MacOS
  • How to add git credentials to the build so it would be able to be used within a shell code?
  • MonoTouch: How to download pdf incrementally as indicated in the Apple slides “Building Newsstand Ap
  • Magento Fatal error: Maximum execution error solution, on WAMP
  • Bad request using file_get_contents for PUT request in PHP
  • Refering to the class itself from within a class mehod in Objective C
  • Get data from AJAX - How to
  • ImageMagick, replace semi-transparent white with opaque white
  • FB SDK and cURL: Unknown SSL protocol error in connection to graph.facebook.com:443
  • Javascript simulate pressing enter in input box
  • Importing jscolor library in angular 2
  • Display Images one by one with next and previous functionality
  • Upload files with Ajax and Jquery
  • Do I've to free mysql result after storing it?
  • How to disable jQuery.jplayer autoplay?
  • A cron job substitute?
  • json Serialization in asp
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?