CODEWITHSUNDEEP
javascriptjqueryhtmlwordpress
David
David

Reputation: 72

Uncheck other checkboxs when one is checked

Ok I have been building this nutrition plugin for wordpress, trying to find a solution for this simple task that a couple of lines of js should work.... just to uncheck the other check boxes when one is checked.

I have 4 input's nested in div's as per this:

<div class="nutrition-mc-group nutrition-mc-group-activity-level">
  <div class="nutrition-mc-selection-box">
    <div class="nutrition-mc-checkbox-outter">
      <input type="checkbox" id="squared-checkbox1">
      <label class="nutrition-mc-checkbox" id="mc-sedentary-select" for="squared-checkbox1"></label>
    </div>
    <p class="nutrition-mc-notes nutrition-mc-notes-switch">Sedentary</p>
    <p class="nutrition-mc-description">Typical desk job / Sitting most of the day</p>
  </div>
  <div class="nutrition-mc-selection-box">
    <div class="nutrition-mc-checkbox-outter">
      <input type="checkbox" id="squared-checkbox2">
      <label class="nutrition-mc-checkbox" id="mc-lightly-active-select" for="squared-checkbox2"></label>
    </div>
    <p class="nutrition-mc-notes nutrition-mc-notes-switch">Lightly Active </p>
    <p class="nutrition-mc-description">Walking around a good amount, retail jobs</p>
  </div>
  <div class="nutrition-mc-selection-box">
    <div class="nutrition-mc-checkbox-outter">
      <input type="checkbox" id="squared-checkbox3">
      <label class="nutrition-mc-checkbox" id="mc-moderately-active-select" for="squared-checkbox3"></label>
    </div>
    <p class="nutrition-mc-notes nutrition-mc-notes-switch">Moderately Active</p>
    <p class="nutrition-mc-description">Walking constantly in a fast paced environment, waiting tables</p>
  </div>
  <div class="nutrition-mc-selection-box">
    <div class="nutrition-mc-checkbox-outter">
      <input type="checkbox" id="squared-checkbox4">
      <label class="nutrition-mc-checkbox" id="mc-vigorously-active-select" for="squared-checkbox4"></label>
    </div>
    <p class="nutrition-mc-notes nutrition-mc-notes-switch">Vigorously Active</p>
    <p class="nutrition-mc-description">Very labor intensive, construction workers</p>
  </div>
</div>

Now the js is a little different, I have tried to simplify it as much as possible:

this.allActive  =   this.mod.find( '.nutrition-mc-group-activity-level input');    

_init: function(){
        this.allActive.on('change',  $.proxy( this._uncheckActivityBtn, this ) );
},
_uncheckActivityBtn: function(){
        $(this.allActive).not(this).prop('checked', false);
},

It runs fine, but its like it is not recognizing the not(this) part argument. if I change the .prop to true it changes the argument and all the inputs become checked when checking one. I cant figure out why it is not understanding the this part of the argument and not excluding the currently selected box.

I tried to just move everything in the one function but when doing a debug the output gave an error for the not(this) operator, saying something about it being unspecified.

Upvotes: 1

Views: 79

Answers (1)

Lini Susan V
Lini Susan V

Reputation: 1195

We had similar requirement in our project and we turned up using radio button. Just change the styling as per your style guide.

Note: all radio button inputs must have the same name.

Upvotes: 1

Related Questions