Solution 1 :

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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </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>

Problem :

I am trying to enable the Quantity box when the checkbox is selected. Below is the HTML code and script I am calling

<div class="spacechkbox">
    <input type="checkbox" name="Product" id="Product" value="Cradlepoint 850"> 
    <label for="Product" class="productnamelabelname">Cradlepoint 850&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </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>
$("input[name='quantity']").prop('disabled', 'true');
$(".product").change(function(){
    $next = $(this).closest('div').find('[name=quantity]');
    $next.prop('disabled', !this.checked);
});

But still, when accessing the page, no change is observed.

Comments

Comment posted by Heretic Monkey

Please, if you care for your sanity, and the sanity of developers who work on your code after you, use CSS

Comment posted by Enable and disable textbox if checkbox is checked

Does this answer your question?

Comment posted by Mech

Did my answer help you out?

By