選擇下一個相鄰元素JQuery

我有一組文件輸入字段，我希望除第一個以外的所有項都被禁用。選擇下一個相鄰元素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>

來源

2012-12-20 imperium2335

我可能是錯誤的，但爲什麼ü把$（ '＃topperform輸入'），而不是$（ '＃topperform'）？ – Drakoumel

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); 
});

來源

2012-12-20 12:32:43 xdazz

謝謝你的完美！ – imperium2335

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

$(this)是輸入，你需要輸入的父（標籤）的下一個兄弟。

Working sample

來源

2012-12-20 12:31:44 Cerbrus

** $（this）**正在引用輸入。 – Niklas

@Niklas：Woops，正確，混合2。 – Cerbrus

使用CSS類來檢查您輸入的當前狀態。當您將標籤元素的類設置爲「禁用」（例如;）時，您可以在編輯輸入字段後從標籤中刪除此類。並通過選擇下列字段來啓用：$（'。disabled'）

來源

2012-12-20 12:32:55 EnrageDev

我建議將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');

下面是一個例子：http://jsfiddle.net/VpGbH/

在我看來，這使得可讀性和性能之間的最佳平衡。

來源

2012-12-20 12:34:31

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); 
});

來源

2012-12-20 12:39:45 Doink

選擇下一個相鄰元素JQuery

回答

相關問題