I believe this is what you are looking for, but without the use of next()
.
The reason next()
wouldn’t work in this case is if you check the last box, there is no next
.
You were also not calling product
correctly. You had the wrong text case (Product
instead of product
) and you were calling the class (.
), not the id (#
).
I’ve edited _id
to be id
and used a wildcard for any inputs that start with product
so it will fire for all of them now.
I think radio buttons would have been a better choice in this example 🙂
$( ":input[id^='product']").change(function() {
if ($(this).is(":checked")) {
$( ":input[id^='product']").prop('checked', false);
$( ":input[id^='product']").prop('disabled', true);
$(this).prop('checked', true);
$(this).prop('disabled', false);
}
if (!$(this).is(":checked")) {
$( ":input[id^='product']").prop('checked', false);
$( ":input[id^='product']").prop('disabled', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="product" id="product">
<label for="product" class="productnamelabelname">Cradlepoint 850
</label>
<label for="quantity" class="productnamelabel">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</div>
<div class="spacechkbox">
<input type="checkbox" name="product" id="product" value="Cradlepoint 850-1200M">
<label for="product" class="productnamelabelname">Cradlepoint 850-1200M</label>
<label for="quantity" class="productnamelabel">Quantity (between 1 and 5):</label>
<input type="number" _id="quantity" name="quantity" min="1" max="5">
</div>
<div class="spacechkbox">
<input type="checkbox" name="product" id="product" value="Cradlepoint AER2200M">
<label for="product" class="productnamelabelname">Cradlepoint AER2200M</label>
<label for="quantity" class="productnamelabel">Quantity (between 1 and 5):</label>
<input type="number" _id="quantity" name="quantity" min="1" max="5">
</div>