0

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

当第一个被设置（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>
4

5 回答 5

3

检查工作演示：

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

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

inputs.change(function() {
    $(this).parent().next().find('input').prop('disabled', false);
});
于 2012-12-20T12:32:43.213 回答
0

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-20T12:39:45.473 回答
0 
$(this).parent().next('label').css('color', 'red');

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

工作样本

于 2012-12-20T12:31:44.923 回答
0

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

于 2012-12-20T12:32:55.997 回答
0

I suggest to add ids to the inputs (f1 for the first...f10 for the last). After that you can use this script:

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

Here is an example: http://jsfiddle.net/VpGbH/

In my opinion this makes the best balance between readability and performance.

于 2012-12-20T12:34:31.810 回答