0

We have a issue in checkbox being checked. we have below div structure where we want checkbox in option group to be selected only one. currently 3 option groups(Body,Sleeves,Cuffs) and in each option group we have multiple checkboxes. user should select only one checkbox per group i.e, In body only one checkbox to selected as well as for sleeves and cuffs. But we are not able to get check for only one. But we are able to check all the checkboxes.

$(".data-options-body").click(function() {
  $(".data-options-body").attr("checked", false); //uncheck all checkboxes
  $(this).attr("checked", true); //check the clicked one
});
$(".data-options-sleeves").click(function() {
  $(".data-options-sleeves").attr("checked", false); //uncheck all checkboxes
  $(this).attr("checked", true); //check the clicked one
});
$(".data-options-cuffs").click(function() {
  $(".data-options-cuffs").attr("checked", false); //uncheck all checkboxes
  $(this).attr("checked", true); //check the clicked one
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group required">
  <label class="control-label">Body</label>
  <div id="input-option152">
    <div class="radio">
      <span class="set-color" data-color="Blue">
        <label for="option-value-754">
          <input type="checkbox" class="data-options-body" name="option[152]" value="754" id="option-value-754" />
          Blue                              
        </label>
      </span>
      <span class="set-color" data-color="Red">
        <label for="option-value-755">
          <input type="checkbox" class="data-options-body" name="option[152]" value="755" id="option-value-755" />
          Red                              
        </label>
      </span>
      <span class="set-color" data-color="White">
        <label for="option-value-762">
          <input type="checkbox" class="data-options-body" name="option[152]" value="762" id="option-value-762" />
          White                              
        </label>
      </span>
      <span class="set-color" data-color="Black">
        <label for="option-value-765">
          <input type="checkbox" class="data-options-body" name="option[152]" value="765" id="option-value-765" />
          Black                              
        </label>
      </span>
      <span class="set-color" data-color="Grey">
        <label for="option-value-761">
          <input type="checkbox" class="data-options-body" name="option[152]" value="761" id="option-value-761" />
          Grey                              
        </label>
      </span>
      <span class="set-color" data-color="Yellow">
        <label for="option-value-763">
          <input type="checkbox" class="data-options-body" name="option[152]" value="763" id="option-value-763" />
          Yellow                              
        </label>
      </span>
      <span class="set-color" data-color="Green">
        <label for="option-value-764">
          <input type="checkbox" class="data-options-body" name="option[152]" value="764" id="option-value-764" />
          Green                              
        </label>
      </span>
    </div>
  </div>
</div>

<div class="form-group required">
  <label class="control-label">Sleeves</label>
  <div id="input-option154">
    <div class="radio">
      <span class="set-color" data-color="Blue">
        <label for="option-value-767">
          <input type="checkbox" class="data-options-sleeves" name="option[154]" value="767" id="option-value-767" />
          Blue                              
        </label>
      </span>
      <span class="set-color" data-color="Red">
        <label for="option-value-770">
          <input type="checkbox" class="data-options-sleeves" name="option[154]" value="770" id="option-value-770" />
          Red                              
        </label>
      </span>
      <span class="set-color" data-color="Green">
        <label for="option-value-768">
          <input type="checkbox" class="data-options-sleeves" name="option[154]" value="768" id="option-value-768" />
          Green                              
        </label>
      </span>
      <span class="set-color" data-color="Grey">
        <label for="option-value-769">
          <input type="checkbox" class="data-options-sleeves" name="option[154]" value="769" id="option-value-769" />
          Grey                              
        </label>
      </span>
      <span class="set-color" data-color="Black">
        <label for="option-value-766">
          <input type="checkbox" class="data-options-sleeves" name="option[154]" value="766" id="option-value-766" />
          Black                              
        </label>
      </span>
      <span class="set-color" data-color="White">
        <label for="option-value-771">
          <input type="checkbox" class="data-options-sleeves" name="option[154]" value="771" id="option-value-771" />
          White                              
        </label>
      </span>
      <span class="set-color" data-color="Yellow">
        <label for="option-value-772">
          <input type="checkbox" class="data-options-sleeves" name="option[154]" value="772" id="option-value-772" />
          Yellow                              
        </label>
      </span>
    </div>
  </div>
</div>

<div class="form-group required">
  <label class="control-label">Cuffs</label>
  <div id="input-option155">
    <div class="radio">
      <span class="set-color" data-color="Blue">
        <label for="option-value-774">
          <input type="checkbox" class="data-options-cuffs" name="option[155]" value="774" id="option-value-774" />
          Blue                              
        </label>
      </span>
      <span class="set-color" data-color="Red">
        <label for="option-value-777">
          <input type="checkbox" class="data-options-cuffs" name="option[155]" value="777" id="option-value-777" />
          Red                              
        </label>
      </span>
      <span class="set-color" data-color="Green">
        <label for="option-value-775">
          <input type="checkbox" class="data-options-cuffs" name="option[155]" value="775" id="option-value-775" />
          Green                              
        </label>
      </span>
      <span class="set-color" data-color="Black">
        <label for="option-value-773">
          <input type="checkbox" class="data-options-cuffs" name="option[155]" value="773" id="option-value-773" />
          Black                              
        </label>
      </span>
      <span class="set-color" data-color="White">
        <label for="option-value-778">
          <input type="checkbox" class="data-options-cuffs" name="option[155]" value="778" id="option-value-778" />
          White                              
        </label>
      </span>
      <span class="set-color" data-color="Grey">
        <label for="option-value-776">
          <input type="checkbox" class="data-options-cuffs" name="option[155]" value="776" id="option-value-776" />
          Grey                              
        </label>
      </span>
      <span class="set-color" data-color="Yellow">
        <label for="option-value-779">
          <input type="checkbox" class="data-options-cuffs" name="option[155]" value="779" id="option-value-779" />
          Yellow                              
        </label>
      </span>
    </div>
  </div>
</div>

Improve this question

3 Answers 3

Reset to default
1

we want checkbox in option group to be selected only one. currently 3 option groups(Body,Sleeves,Cuffs) and in each option group we have multiple checkboxes. user should select only one checkbox per group

I think what you need radio not checkbox. As this is the functionality of radio that only one option is selected with in one group. So change your checkbox to radio and try again.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You should use .prop() and not .attr()

Like this .prop("checked", false)

$(".data-options-body, .data-options-sleeves, .data-options-cuffs").click(function() {
  var c = "." + $(this).attr("class");
  $(c).prop("checked", false); //uncheck all checkboxes
  $(this).prop("checked", true); //check the clicked one
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group required">
  <label class="control-label">Body</label>
  <div id="input-option152">
    <div class="radio">
      <span class="set-color" data-color="Blue">
              <label for="option-value-754">
              <input type="checkbox" class="data-options-body" name="option[152]" value="754" id="option-value-754" />
              Blue                              </label>
            </span>
      <span class="set-color" data-color="Red">
              <label for="option-value-755">
              <input type="checkbox" class="data-options-body" name="option[152]" value="755" id="option-value-755" />
              Red                              </label>
            </span>
      <span class="set-color" data-color="White">
              <label for="option-value-762">
              <input type="checkbox" class="data-options-body" name="option[152]" value="762" id="option-value-762" />
              White                              </label>
            </span>
      <span class="set-color" data-color="Black">
              <label for="option-value-765">
              <input type="checkbox" class="data-options-body" name="option[152]" value="765" id="option-value-765" />
              Black                              </label>
            </span>
      <span class="set-color" data-color="Grey">
              <label for="option-value-761">
              <input type="checkbox" class="data-options-body" name="option[152]" value="761" id="option-value-761" />
              Grey                              </label>
            </span>
      <span class="set-color" data-color="Yellow">
              <label for="option-value-763">
              <input type="checkbox" class="data-options-body" name="option[152]" value="763" id="option-value-763" />
              Yellow                              </label>
            </span>
      <span class="set-color" data-color="Green">
              <label for="option-value-764">
              <input type="checkbox" class="data-options-body" name="option[152]" value="764" id="option-value-764" />
              Green                              </label>
            </span>
    </div>
  </div>
</div>

<div class="form-group required">
  <label class="control-label">Sleeves</label>
  <div id="input-option154">
    <div class="radio">
      <span class="set-color" data-color="Blue">
                <label for="option-value-767">
                <input type="checkbox" class="data-options-sleeves" name="option[154]" value="767" id="option-value-767" />
                Blue                              </label>
              </span>
      <span class="set-color" data-color="Red">
                <label for="option-value-770">
                <input type="checkbox" class="data-options-sleeves" name="option[154]" value="770" id="option-value-770" />
                Red                              </label>
              </span>
      <span class="set-color" data-color="Green">
                <label for="option-value-768">
                <input type="checkbox" class="data-options-sleeves" name="option[154]" value="768" id="option-value-768" />
                Green                              </label>
              </span>
      <span class="set-color" data-color="Grey">
                <label for="option-value-769">
                <input type="checkbox" class="data-options-sleeves" name="option[154]" value="769" id="option-value-769" />
                Grey                              </label>
              </span>
      <span class="set-color" data-color="Black">
                <label for="option-value-766">
                <input type="checkbox" class="data-options-sleeves" name="option[154]" value="766" id="option-value-766" />
                Black                              </label>
              </span>
      <span class="set-color" data-color="White">
                <label for="option-value-771">
                <input type="checkbox" class="data-options-sleeves" name="option[154]" value="771" id="option-value-771" />
                White                              </label>
              </span>
      <span class="set-color" data-color="Yellow">
                <label for="option-value-772">
                <input type="checkbox" class="data-options-sleeves" name="option[154]" value="772" id="option-value-772" />
                Yellow                              </label>
              </span>
    </div>
  </div>
</div>

<div class="form-group required">
  <label class="control-label">Cuffs</label>
  <div id="input-option155">
    <div class="radio">
      <span class="set-color" data-color="Blue">
              <label for="option-value-774">
              <input type="checkbox" class="data-options-cuffs" name="option[155]" value="774" id="option-value-774" />
              Blue                              </label>
            </span>
      <span class="set-color" data-color="Red">
              <label for="option-value-777">
              <input type="checkbox" class="data-options-cuffs" name="option[155]" value="777" id="option-value-777" />
              Red                              </label>
            </span>
      <span class="set-color" data-color="Green">
              <label for="option-value-775">
              <input type="checkbox" class="data-options-cuffs" name="option[155]" value="775" id="option-value-775" />
              Green                              </label>
            </span>
      <span class="set-color" data-color="Black">
              <label for="option-value-773">
              <input type="checkbox" class="data-options-cuffs" name="option[155]" value="773" id="option-value-773" />
              Black                              </label>
            </span>
      <span class="set-color" data-color="White">
              <label for="option-value-778">
              <input type="checkbox" class="data-options-cuffs" name="option[155]" value="778" id="option-value-778" />
              White                              </label>
            </span>
      <span class="set-color" data-color="Grey">
              <label for="option-value-776">
              <input type="checkbox" class="data-options-cuffs" name="option[155]" value="776" id="option-value-776" />
              Grey                              </label>
            </span>
      <span class="set-color" data-color="Yellow">
              <label for="option-value-779">
              <input type="checkbox" class="data-options-cuffs" name="option[155]" value="779" id="option-value-779" />
              Yellow                              </label>
            </span>
    </div>
  </div>
</div>

Improve this answer

1 Comment

Thx we have got it after we changing it to prop. But anyone tell how we can generalise it instead of writing three functions for each option group.
0

prop() grabs the specified DOM property, while attr() grabs the specified HTML attribute. This is why you should use prop().

$(".data-options-sleeves").prop("checked", false);
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.