在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.