CODEWITHSUNDEEP
javascriptjquery
Karem
Karem

Reputation: 18103

Adding and changing checkbox names + labels on change

This is what I am working with:

http://jsfiddle.net/VkYnQ/

The goal is to select as many times you want, and then select what time, and then it should add and show the times under the 'Copy to more dates?' .

Currently it has the 1 static checkbox, just to demonstrate how it should work.

So when there's 1 static checkbox 0800 out from each weekdays, it means that you have selected 1 time and that one time is currently at 08:00.

And if you change this time to 16:00, the checkbox name and label should change to 1600.

If select 2 times, and select the second to 20:00, it should add a checkbox at each weekdays next to the other checkboxes, with label "2000"

This is what I have tried, for making the changing work, so the checkbox follow if you change from e.g 08:00 to 16:00 like mentioned above: http://jsfiddle.net/epCbv/1/

Which is working, but I cant figure out a way to make it work with my code.

Hope anyone out there can help me out, I'll reward with an +300 reputation/bounty, when it's possible (2 days).

Upvotes: 1

Views: 228

Answers (2)

Alex Ball
Alex Ball

Reputation: 4474

Based on your code:

use: 

$('.timeSelect').on('change', function(){

    var ind = parseInt($(this).attr('id')) +2;
    var newVal = $(this).val().replace(':', '');
    $("input:checkbox").eq(ind).attr('name', 'copyTime[1]['+newVal+']');
    $("input:checkbox").eq(ind).next('span').html(newVal);

    console.log(ind);

});

But change: clone() with .clone(true) //ADDED

.attr('name', function() { // changing the name
                    return 'seats_timeclock[' + randnr + ']';
                }).attr('id', (parseInt($('select[name^=seats_timeclock]:last').attr('id')))+2) //ADDED

and add an id to select:

<td class="borderRight">
<select class="timeSelect" id="0" name="seats_timeclock[]">

This the Fiddle.

Upvotes: 0

Adrien
Adrien

Reputation: 2206

I do not aim to do all the job but I updated your code to make it approaching the goal you are looking for. The code is dirty, I do not spend a lot of time but it remains understandable.

Let me know if this is really on the good way :)

See the result: http://jsfiddle.net/adrieng/VkYnQ/3/

Nota Bene: The update stuff is not linked to the first select.timeclock. So chose, for example, to display at least 2 times and change the time on the second, third, fourth,… select input ^^

Upvotes: 1

Related Questions