Disable/enable input box type 'number' on tick of checkbox in an HTML table

Question

I want to disable/enable input tag with the type number when a checkbox is ticked. The checkboxes are on the same row as where the input tag is placed. I have tried this method

$(document).on('change', '.ch_attend', function () {
                        if(this.checked){
                            $(this).closest('tr').find('input:text').prop('disabled', false);
                            $(this).closest('tr').find('button').prop('disabled', false);
                            $(this).closest('tr').find('input:text').val(0);
                            computeKPI();
                        }else{
                            $(this).closest('tr').find('input:text').prop('disabled', true);
                            $(this).closest('tr').find('button').prop('disabled', true);
                            $(this).closest('tr').find('input:text').val(0);
                            computeKPI();
                            $('#chkall').prop('checked', false).uniform(); 
                        }
                    }).find('.ch_attend').change();

and change the input:text to input:number but it didn't work. It only works when the type is text

The type of input on the DOM is number already so it is not input type='text' anymore.

if($retval->num_rows>0){
        while($row = $retval->fetch_assoc()){
            $DOM_string .= "<tr>
                    <td style='text-align-last: center;'><label><input type='checkbox' class='ch_attend'></label></td>
                    <td style='text-align-last: center;'><label>".$row['full_name']."</label></td>
                    <td style='text-align-last: center;'><input disabled='true' style='text-align-last: center; width: 40px; height: 25px;' class='form-control score' data-id='".$row['id']."' type='number' min='0' step='any' value='0'></td>
                    <td style='text-align-last: center;'><input disabled='true' style='text-align-last: center; width: 40px; height: 25px;' class='form-control totalscore' data-id='".$row['id']."' type='number' min='0' step='any' value='0'></td>
                    <td style='text-align-last: center;'><button type='button' disabled='true' class='btn btn-warning btn-xs action' data-full_name='".$row['full_name']."' style='height: 20px; width: 35px; padding-top: 0px; padding-bottom: 0px;'><span class='icon icon-check' style='font-size:10px; line-height: 20px;'></span></button></td>
                </tr>";
            $_SESSION['cnt'] += 1;
        }
    }

HTML markup came from an ajax success result.

I'm confused now. Please help me on how to do that. Thank you.

Answer 1

我认为您正在寻找的是input[type=number]和input[type=text]

Answer 2

I tried to find the class instead of find the input type.

$(this).closest('tr').find('.score').prop('disabled', false);
$(this).closest('tr').find('.totalscore').prop('disabled', false);

and this one works for me. I am wondering if there is another way to do this. A shorter code maybe.

Answer 3

I made a plunker of what you are looking for with raw javascript.

https://plnkr.co/edit/kPF5Mdkh1IeAU0AoW31Y?p=preview

The main thing you want to do, after getting the input field with javascript, is to set it's disabled state to true.

var numberInput = document.querySelector('input[type="number"]');
numberInput.disabled = true;

You can make an function to watch the checkbox change event.

<input type="checkbox" onchange="toggleNumberInput(event)">

In this method, you have access to the checked state.

event.target.checked; //will be true when checked, false otherwise.