在HTML表格中的復選框的勾號上禁用/啟用輸入框類型“數字”

Question

勾選復選框后，我想使用類型編號禁用/啟用輸入標簽。 復選框與輸入標簽放置在同一行。 我嘗試過這種方法

$(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();

並將input：text更改為input：number，但是沒有用。 僅當類型為文本時才有效

DOM上的輸入類型已經是數字，因此不再是輸入type ='text' 。

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標記來自ajax成功結果。

我現在很困惑。 請幫助我。 謝謝。

Answer 1

我認為您正在尋找的是input[type=number]和input[type=text]

Answer 2

我試圖找到類而不是找到輸入類型。

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

這對我有用。 我想知道是否還有另一種方法可以做到這一點。 可能是較短的代碼。

Answer 3

我用原始javascript制作了您想要的東西。

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

在使用javascript獲取輸入字段之后，您要做的主要事情是將其禁用狀態設置為true。

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

您可以使函數監視復選框更改事件。

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

在這種方法中，您可以訪問選中狀態。

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