禁用特定表单字段单击

Question

我已经禁用按钮点击的具体领域，如我使用jquery我可以取消这些

各个领域已经两种形式在我的网页这样

< form method='post' action='' class='myform'> 
<input type='text' name='name_0'> 
<input type='email' name='email_0'> 
<input class='btn' type='submit'> 
</form> 

< form method='post' action='' class='myform'> 
<input type='text' name='name_1'> 
<input type='email' name='email_1'> 
<input class='btn' type='submit'> 
</form> 

$(document).ready(function(){        
    $('.btn').click(function(){ 
     $("input").prop('disabled', true); 
    }); 
}); 

但我不知道如何定位像NAME_0，EMAIL_0特定字段当我第一次提交按钮，请帮我这个

Answer 1

要禁用它们，你将使用属性选择：

$("input[name='name_0']").prop('disabled', true); 

jQuery Attribute Selectors

如果你有多个项目，你可以将它们组合起来：

$("input[name='name_0'],input[name='email_0']").prop('disabled', true); 

你更大的问题是，你想通过点击的东西用一个类来确定形式。为了缩小下来，你可以做一些DOM遍历：

$(document).on('click', '.btn', function(event) { 
    // which form? this one! 
    var currentForm = $(this).closest('form'); 
    // disable all inputs for this form 
    currentForm.find('input').prop('disabled', true); 
}); 

现在我不必知道它输入到禁止（如果我想禁用所有的）。我只需要在按钮的表单中找到输入。

Answer 2

你应该阅读有关selectors

$("input[name=name_0]").prop('disabled', true); 

或一个jQuery的解决方案可以通过使用.closest（目标吧）.find（）

$(document).ready(function(){        
    $('.btn').click(function(e){ 
     e.preventDefault(); 
     $(this).closest('form').find("input[type=text]").prop('disabled', true); 
     $(this).closest('form').find("input[type=email]").prop('disabled', true); 
    }); 
}); 

提交表单并禁用所有输入并专注于下一个表格上的第一个输入

$(document).ready(function(){        
    $('.myform').on('submit',function(e){ 
     e.preventDefault(); 
     $(this).closest('form').find("input").prop('disabled', true); 
     $(this).next('form').find('input:first').focus(); 
    }); 

}); 

Working Demo