Question

我有javascript代码可以禁用其他输入（如果已填充）。我需要在数据库中出来的表中。可悲的是，它只适用于第一个表行并禁用表中的所有输入（但如果输入填充不首先没有发生）

使用Javascript：

  $(function(){
    $("input").on("keyup", function(){
            if($(this).hasClass("inputA") && $(".inputA").val()){
               $("input.inputB").prop("disabled", true);
               $("input.inputA").prop("disabled", false);
               $("input.inputC").prop("disabled", true);

            } else if($(this).hasClass("inputB") && $(".inputB").val()){
               $("input.inputA").prop("disabled", true);
                $("input.inputB").prop("disabled", false);
                 $("input.inputC").prop("disabled", true);

            } else if($(this).hasClass("inputC") && $(".inputC").val()){
               $("input.inputA").prop("disabled", true);
                $("input.inputB").prop("disabled", true);
                 $("input.inputC").prop("disabled", false);

            }  else {
                       $(".inputA, .inputB").prop("disabled", false);

                    }
    });
});

来自html表的我的td：

<td><input type="text" class="inputA" value=""></td>
<td><input type="text" class="inputB" value=""></td>
<td><input type="text" class="inputC" value=""></td>

如何使每条线分开工作？

Answer 1

在每个class上使用相同的input，在input之后创建事件，然后检查输入的value是否为空disable 1}}所有其他input为此工作在一行中只需选择parent的所有输入。

尽量避免多次测试。不可忽视和可维护。

示例

＆＃13;
＆＃13;
$(".input").on("keypress change keyup",function(){ if($(this).val() != "") { $(this).parent().parent().find(".input").not($(this)).prop("disabled",true); } else { $(this).parent().parent().find(".input").prop("disabled",false); } });
＆＃13;
.input:disabled{ background-color:LightBlue; border:solid 1px blue; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <input type="text" class="input" value=""> </td> <td> <input type="text" class="input" value=""> </td> <td> <input type="text" class="input" value=""> </td> </tr> <tr> <td> <input type="text" class="input" value=""> </td> <td> <input type="text" class="input" value=""> </td> <td> <input type="text" class="input" value=""> </td> </tr> </table>
＆＃13;
＆＃13;
＆＃13;

Answer 2

这解决了您的问题！禁用所有与当前编辑的类别不同的输入字段。

演示：https://jsfiddle.net/3tf8ou3y/1/

jQuery(document).ready(function($) {
    $("tr").on("keyup", "input", function(event) {
        // get the current row
        var $row = $(event.delegateTarget);
        // get the class of the input field being edited
        var this_class = $(this).attr('class');

        if ($(this).val().length > 0) {
            // if the input field has a value, disable all
            // other input fields in the sam row
            $('input:not(.'+this_class+')', $row).prop('disabled', true);
        } else {
            // else enable all input fields
            $('input', $row).prop('disabled', false);
        }
    });
});

Answer 3

您可以使用＆＃39; jQuery（this）.val（）＆＃39;而不是＆＃39; jQuery（＆＃34; .inputA＆＃34;）。val（）＆＃39;或者＆＃39; jQuery（＆＃34; .inputB＆＃34;）。val（）＆＃39;或jQuery（＆＃34; .inputC＆＃34;）。val（）

如果其中一个输入已填满，则禁用表行中的输入

3 个答案: