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="http://ift.tt/1oMJErh"></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>
Aucun commentaire:
Enregistrer un commentaire