0

ファイル入力フィールドのグループがあり、最初のフィールドを除いてすべてを無効にしたい。

最初のファイルが設定（変更）されると、次のファイルフィールドのロックが解除されます。

どうすればよいですか？私が試してみました：

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

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 に答える
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

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 に答える