jeudi 28 mai 2015

Checkbox to trigger input, and vice versa

I am currently working on a form, and am required to do the following:

If the checkbox next to the input field (in this case, a qty field) is checked, then set the input to "1". If the qty field is greater than one, then the checkbox remains checked.

If the checkbox is unchecked, then the qty field is reset to 0. Alternatively, if the user inputs 0 into the qty field, then the checkbox is also unchecked

Problems

  • The increase button currently requires two clicks to increment the qty
  • When the qty field has a number > 0, and is then decreased to 0, the increase button no longer works.

Can anyone spot the error in my ways?

jQuery('.exhibitorBooking--table .desc input[type="checkbox"]').on('change', function(){
        if(this.checked){
            jQuery(this).parents('tr').find('.qty-field input[type="text"]').val('1');
        } else {
            jQuery(this).parents('tr').find('.qty-field input[type="text"]').val('0');
        }
    });
    jQuery('.exhibitorBooking--table .qty-field input[type="text"]').on('change', function(){
        if(jQuery(this).val() == 0){
            jQuery(this).parents('tr').find('input[type="checkbox"]').attr('checked', false);
        } else if(jQuery(this).val() == 1) {
            jQuery(this).parents('tr').find('input[type="checkbox"]').trigger('change').attr('checked', true);
        } else {
            jQuery(this).parents('tr').find('input[type="checkbox"]').attr('checked', true);
        }
    });

JSFiddle




Aucun commentaire:

Enregistrer un commentaire