I have 2 sets of checkboxes and when 2 checkboxes are selected in each group, rest are disabled. My Jquery works, but there is a lot of duplicate code. How can I combine the two and make it more readable? Is there a way to create a function and have the two sets of checkboxes passed in as arguments when clicked upon? Thanks in advance.
PS - I'm using Bootstrap to style and Values of selected checkboxes will be passed on to PHP.
const CHECKBOXES_SET1 = $(".chkboxes-set1");
const CHECKBOXES_SET2 = $(".chkboxes-set2");
CHECKBOXES_SET1.on("click", function(evt) {
let checkedCount = $(CHECKBOXES_SET1).filter(":checked").length;
if (checkedCount >= 2) {
$(CHECKBOXES_SET1).filter(":not(:checked)").prop("disabled", true);
$(CHECKBOXES_SET1).filter(":not(:checked)").parent().addClass("disabled");
} else {
$(CHECKBOXES_SET1).filter(":not(:checked)").prop("disabled", false);
$(CHECKBOXES_SET1).filter(":not(:checked)").parent().removeClass("disabled");
}
});
CHECKBOXES_SET2.on("click", function(evt) {
let checkedCount = $(CHECKBOXES_SET2).filter(":checked").length;
if (checkedCount >= 2) {
$(CHECKBOXES_SET2).filter(":not(:checked)").prop("disabled", true);
$(CHECKBOXES_SET2).filter(":not(:checked)").parent().addClass("disabled");
} else {
$(CHECKBOXES_SET2).filter(":not(:checked)").prop("disabled", false);
$(CHECKBOXES_SET2).filter(":not(:checked)").parent().removeClass("disabled");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="test.php" method="post">
<div class="form-group mb-2">
<label for="first-btn-group">Pick two numbers</label>
<div class="col" id="first-btn-group">
<label class="btn btn-outline-info">
<input type="checkbox" value="1" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">1
</label>
<label class="btn btn-outline-info">
<input type="checkbox" value="2" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">2
</label>
<label class="btn btn-outline-info">
<input type="checkbox" value="3" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">3
</label>
<label class="btn btn-outline-info">
<input type="checkbox" value="4" name="chkboxes-set1[]" class="chkboxes-set1" data-toggle="button">4
</label>
</div>
</div>
<div class="form-group mb-2">
<label for="second-btn-group">Pick two numbers</label>
<div class="col" id="second-btn-group">
<label class="btn btn-outline-info">
<input type="checkbox" value="5" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">5
</label>
<label class="btn btn-outline-info">
<input type="checkbox" value="6" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">6
</label>
<label class="btn btn-outline-info">
<input type="checkbox" value="7" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">7
</label>
<label class="btn btn-outline-info">
<input type="checkbox" value="8" name="chkboxes-set2[]" class="chkboxes-set2" data-toggle="button">8
</label>
</div>
</div>
<div class="form-group row mb-1 mt-3">
<div class="col-4 text-right">
<button type="submit" class="btn btn-primary" name="nums-reset">Reset</button>
</div>
<div class="col-4">
<button type="submit" class="btn btn-primary" name="nums-submit">Submit</button>
</div>
</div>
</form>
Aucun commentaire:
Enregistrer un commentaire