选择下一个相邻元素JQuery

Question

我有一组文件输入字段，除了第一个字段外，我希望所有字段都被禁用。

当第一个设置（onchanged）时，下一个文件字段将被解锁。

我该怎么做？我试过了：

$('#topperform input').change(function(){

$(this).next('label').css('color', 'red') ;

})

哪个什么都没做。

我的HTML：

<form id="topperform" method="post">
<label>Main image <input type="file" /></label>
<label>2nd image <input type="file" /></label>
<label>3rd image <input type="file" /></label>
<label>4th image <input type="file" /></label>
<label>5th image <input type="file" /></label>
<label>6th image <input type="file" /></label>
<label>7th image <input type="file" /></label>
<label>8th image <input type="file" /></label>
<label>9th image <input type="file" /></label>
<label>10th image <input type="file" /></label>
</form>

Answer 1

的 Check the working demo ：

var inputs = $('#topperform').find('input');

inputs.not(':first').prop('disabled',true);

inputs.change(function() {
    $(this).parent().next().find('input').prop('disabled', false);
});

Answer 2

$(this).parent().next('label').css('color', 'red');

$(this)是输入，您需要输入的父级（标签）的下一个兄弟。

<强> Working sample

Answer 3

使用css-classes检查条目的当前状态。当您将标签元素的类设置为“禁用”（例如;））时，在编辑输入字段后从标签中删除此类。并通过以下选项启用下一个字段：$（'。disabled'）

Answer 4

我建议在输入中添加ids（f1为最后一个... f10。之后，您可以使用此脚本：

$('#topperform input').attr('disabled', 'disabled');
$('#topperform input').change(function () {
    var id = parseInt(this.id.replace(/^f/, ''), 10);
    $('#f' + (id + 1)).removeAttr('disabled');
});
$('#f1').removeAttr('disabled');
​

以下是一个示例：http://jsfiddle.net/VpGbH/

在我看来，这在可读性和性能之间取得了最佳平衡。

Answer 5

HTML

<form id="topperform" method="post">
<label>Main image <input type="file"/></label>
<label>2nd image <input type="file" disabled = "disabled" /></label>
<label>3rd image <input type="file" disabled = "disabled"  /></label>
<label>4th image <input type="file" disabled = "disabled" /></label>
<label>5th image <input type="file" disabled = "disabled" /></label>
<label>6th image <input type="file" disabled = "disabled" /></label>
<label>7th image <input type="file" disabled = "disabled" /></label>
<label>8th image <input type="file" disabled = "disabled" /></label>
<label>9th image <input type="file" disabled = "disabled" /></label>
<label>10th image <input type="file" disabled = "disabled" /></label>
</form>​​​​​​​​​​​​​​

的Javascript

 $('#topperform').find('input').change(function() {
     $(this).parent().next().find('input').prop('disabled', false);
 });​