1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Disabling other checkboxes, and reenabling them if none are checked

Discussion in 'jQuery' started by PoPSiCLe, Feb 24, 2014.

  1. #1
    I have a small code snippet:
    
    ar getval = $this.parents('tbody').find('input');
                 getval.each(function() {
                   if ($(this).val() == studentID && !$(this).is(':checked')) {
                     $(this).prop('disabled', true).parents('.draggable').css({'opacity':'0.5'});
                   }
                 });
    
    Code (markup):
    What this does is it goes through a set number of elements matching the ID, and disables those whenever one checkbox is clicked. This works fine.
    What I would like to be able to do, however, is that if the last checked checkbox is clicked, so that none of these checkboxes are checked, all of them gets reenabled.
    I'm just not sure how to implement that in the code I have right now.
    Granted, I'm tired, it's 5am here, and I should go to sleep, but if anyone wanna lend a hand, I'd be happy :)
     
    PoPSiCLe, Feb 24, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    See, this is a stunning example of jq for nothing -- AND how using jQ can limit your options on what you are doing -- AND bad scripting practices since you're setting a CSS value in your scripts. (much less that annoying daisy chain of garbage that is JQ's hallmark)... about the only useful thing JQ is providing is parent targeting by selector, and IMHO that smells like bad markup and/or bad markup practices. (especially mated to dicking around with CSS properties in the scripting instead of a class swap)

    Do you have a live copy of this somewhere? I'm having a bit of a time figuring out what the devil that mess is even supposed to do, it just reeks of doing it wrong.

    Though much of that could be that much like with CSS, Scripting without the markup it's manipulating is gibberish.

    ... Also... since this is all going on when checkboxes are clicked... shouldn't you be trapping and running all this on the checkboxes instead of what appears to be some form of post-processing? I might be wrong on that, since we aren't seeing where you're applying/running the above code either... that's the problem with snippets.
     
    deathshadow, Feb 25, 2014 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Unfortunately, no live example, since this is behind a login-screen - however, the markup is pretty straight forward (this is for a coordination for a timesheet), and the markup goes something like this:
    
    <tbody>
          <tr class="weeknumber">
                  <td colspan="8"><strong>Uke nummer 10</strong></td>
           </tr>
           <tr>
                   <td class="dayname mon"><strong>Mandag</strong></td>
                   <td class="datecell">03 / 03 / 2014</td>
                   <td class="shift_1 droppable"><span class="draggable shiftleader"> Ørjan Langbakk<span class="squaredFour"><input class="right" type="checkbox" name="mon_1_1_03/03/2014" id="oerjanlangbakk_mon_stjernesalen_1_03/03/2014" value="2" ><label class="" for="oerjanlangbakk_mon_stjernesalen_1_03/03/2014"></label></span></span></td>
                    <td class="shift_2 droppable"><span class="draggable shiftleader"> Ørjan Langbakk<span class="squaredFour"><input class="right" type="checkbox" name="mon_1_2_03/03/2014" id="oerjanlangbakk_mon_stjernesalen_2_03/03/2014" value="2" disabled="disabled"><label class="" for="oerjanlangbakk_mon_stjernesalen_2_03/03/2014"></label></span></span></td>
                     <td class="shift_3 droppable"><span class="nosignups left">Ingen har satt seg opp på dette skiftet</span><span class="nosignups pointer searchusers right"></span></td>
                      <td class="shift_4 noshift"></td>
                      <td class="shift_5 noshift"></td>
                      <td class="shift_6 noshift"></td>
             </tr>
             <tr>
                <td class="dayname tue"><strong>Tirsdag</strong></td>
                <td class="datecell">04 / 03 / 2014</td>
                <td class="shift_1 droppable"><span class="draggable shiftleader"> Ørjan Langbakk<span class="squaredFour"><input class="right" type="checkbox" name="tue_1_1_04/03/2014" id="oerjanlangbakk_tue_stjernesalen_1_04/03/2014" value="2" ><label class="" for="oerjanlangbakk_tue_stjernesalen_1_04/03/2014"></label></span></span></td>
                 <td class="shift_2 droppable"><span class="draggable shiftleader"> Ørjan Langbakk<span class="squaredFour"><input class="right" type="checkbox" name="tue_1_2_04/03/2014" id="oerjanlangbakk_tue_stjernesalen_2_04/03/2014" value="2" ><label class="" for="oerjanlangbakk_tue_stjernesalen_2_04/03/2014"></label></span></span></td>
                  <td class="shift_3 droppable"><span class="nosignups left">Ingen har satt seg opp på dette skiftet</span><span class="nosignups pointer searchusers right"></span></td>
                  <td class="shift_4 noshift"></td>
                  <td class="shift_5 noshift"></td>
                  <td class="shift_6 noshift"></td>
           </tr>
    </tbody>
    
    Code (markup):
    The point is that yes, I could add a class instead of doing the CSS directly - this is just in the making, and I might change that if I just can get the checkboxes to behave as I want them to :)
    The point is that users can sign on for several shifts within one week - when a shiftleader approves one of those shifts, the other shifts the user has signed up for should be disabled, so the user can't be set up on more than one shift each week (hence the scope of the <tbody> tag to prevent the finding of other input boxes (there are a lot of them in one form)).
    And, if the shiftleader then deselect that shift in case s/he wants to put the user somewhere else in the shift-list, that's when I want the checkboxes to be enabled again.
    The rest, the spans and stuff is basically just put there for getting certain CSS-styles to behave properly without having to rewrite a bunch of crap, currently. And yes, there are <table><thead> etc., and a <form>-tag wrapping the entire table, but I didn't think those were needed for this particular thing.
     
    PoPSiCLe, Feb 25, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    I'd suggest that when you have one checked/changed, just go through all of them and disable all of them first THEN enable the one that was checked. It's often easier to disable all and enable one, than to go through and selectively disable/enable as 'each'. -- ALMOST looks like what you are trying to do, but I have the darndest time making sense out of jQuery messes (talk about pointlessly and needlessly cryptic). It's really hard to say without seeing what's calling that original code you have there. (again, this isn't the whole picture -- what's calling it, why and when?!?)

    Though looking at that markup -- gah... you have heard of TH and SCOPE, right? Should that even BE a tbody since that first colspan looks like it should be a CAPTION? (meaning multiple tables)
     
    deathshadow, Feb 25, 2014 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    It's basically a structure like something like this:
    
    <table>
      <thead>
    <tr>
        <th>Day</th>
        <th>Date</th>
       <th>Shift 1</th>
      <th>Shift 2</th>
      <th>Shift 3</th>
    </tr>
      </thead>
    <tbody>
      <tr><td>Weeknumber</td></tr>
    <tr>
      <td>Monday</td>
      <td>01/01/2001</td>
     <td>Checkbox and other stuff goes here</td>
     <td>Checkbox and other stuff goes here</td>
     <td>Checkbox and other stuff goes here</td>
    </tr>
    </tbody>
    <tbody>
      <tr><td>Weeknumber</td></tr>
    <tr>
      <td>Monday</td>
      <td>07/01/2001</td>
     <td>Checkbox and other stuff goes here</td>
     <td>Checkbox and other stuff goes here</td>
     <td>Checkbox and other stuff goes here</td>
    </tr>
    </tbody>
    </table>
    
    Code (markup):
    Perfectly valid - it's basically a month-display, week by week, where personell managers can assign users to shifts - there are some click-and-drag functionality, and some ajax etc. so that it looks shiny, and basically is meant to be very easy to use.

    There's no room for caption anywhere, simply because there's only supposed to be one caption pr. table, as far as I understand it, and that won't fit with the current scheme.
    The whole bit (dumbed down, and removed other variables and ajax-functions, looks like this:
    
      $('#coordinate_employees_form').on('click', 'input[type=checkbox]', function(event) {
                 var $this = $(this);
    
                 var getval = $this.parents('tbody').find('input');
                 getval.each(function() {
                   if ($(this).val() == studentID && !$(this).is(':checked')) {
                     $(this).prop('disabled', true).parents('.draggable').css({'opacity':'0.5'});
                   }
                 });
           });
    
    Code (markup):
     
    PoPSiCLe, Feb 25, 2014 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Nevermind, I figured it out. Ditched the old code, and ended up with this:
    
    $('#coordinate_employees_form').on('click', 'input[type=checkbox]', function(event) {
                 var $this = $(this);
    
            if ($this.val() == studentID) {
                   if (($this).is(':checked')) {
                     getval.not($this).prop('disabled',true).parents('.draggable').css({'opacity':'0.5'});
                   } else {
                     getval.not($('.predisabled')).prop('disabled',false).parents('.draggable').css({'opacity':'1'});
                   }
                 }
    });
    
    Code (markup):
    It works fine :)
     
    PoPSiCLe, Feb 25, 2014 IP
    HuggyStudios likes this.
  7. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #7
    Strange isn't it. When you share your problem you normally answer the question yourself. That happens to me at work all the time!
     
    HuggyStudios, Feb 26, 2014 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    It often happens, yes. However, @deathshadow helped, by pointing me in the right direction, and making me rethink how I did that bit of code :)
     
    PoPSiCLe, Feb 26, 2014 IP