Javascript 选择下一个相邻元素JQuery

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

当第一个字段设置为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>

$这是输入，您需要输入父项的下一个同级标签

$这是输入，您需要输入父项的下一个同级标签

:

:

---

使用css类检查条目的当前状态。例如，当您刚刚将标签元素的类设置为禁用时；编辑输入字段后，可以从标签中删除此类。并通过使用“$”选择下一个字段来启用它。禁用“

使用css类检查条目的当前状态。例如，当您刚刚将标签元素的类设置为禁用时；编辑输入字段后，可以从标签中删除此类。并通过使用“$”.disabled“

选择下一个字段来启用该字段。我建议为第一个字段的输入f1添加ID，为最后一个字段的输入f10添加ID。之后，您可以使用以下脚本：

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

以下是一个例子：

---

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

我建议在输入f1中添加ID，第一个是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');
​

以下是一个例子：

在我看来，这是可读性和性能之间的最佳平衡。

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>​​​​​​​​​​​​​​

HTML

---

我可能弄错了，但是为什么你放了$'topperform input'而不是$'topperform'？我可能弄错了，但是为什么你放了$'topperform input'而不是$'topperform'？$这是在引用输入。$这是在引用输入。

<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>​​​​​​​​​​​​​​

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