2

valumsファイルアップローダーを使用しています。しかし、ユーザーがチェックボックスをオンにしていない場合にアップロードボタンを無効にするために、チェックボックスを開始したいと思います。

私はそれを通常のフォームで動作させることができますが、彼はフォーム属性としてdiv要素を使用していると思うので、値を使用していません。したがって、コードを台無しにしたと思います。

htmlで私は持っています：

<form class="well">
<label>Upload a Single File</label>
<label class="checkbox">
<input id="tos" onclick="if(this.checked){this.form.qq-upload-button.disabled=false}else{this.form.qq-upload-button.disabled=true};this.blur();" checked="" value="1" name="tos" type="checkbox"> I have read and agree to the <a href="/tos">TOS</a>
</label>
<div id="file-uploader-demo1">      
    <noscript>          
        <p>Please enable JavaScript to use file uploader.</p>
        <!-- or put a simple form for upload here -->
    </noscript>         
</div>
</form>

fileuploader.js（私が持っている評価コード）

template:   '<div class="qq-uploader">' + 
            '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
            '<div class="qq-upload-button btn btn-primary left">Upload a file</div><span class="help-inline">&nbsp;Lets Do it!</span>' +
            '<ul class="qq-upload-list"></ul>' + 
            '</div>',

私がコックしたものを見つけることができますか？

基本的に、ユーザーがチェックボックスをオンにしていない場合は、アップロードボタンを無効にします。

通常のフォームの場合、このコードは機能します。

<form class="well">
  <label>Upload a Single File</label>
  <input type="file" class="span3" placeholder="Click Here">
  <span class="help-inline">Associated help text!</span>
  <label class="checkbox">
  <input id="tos" onclick="if(this.checked){this.form.btn.disabled=false}else{this.form.btn.disabled=true};this.blur();" checked="" value="1" name="tos" type="checkbox"> I have read and agree to the <a href="/tos">TOS</a>
  </label>
  <input name="btn" type="submit" class="btn btn-primary left" value="UPLOAD">
</form>
4

1 に答える 1

4

インラインonclickハンドラーを削除し、次のJavaScriptコードを追加します。

$('#tos').on('change', function() {
    $('.qq-upload-button').prop('disabled', !this.checked);
});

これにより、チェックボックスの「無効」状態が「チェック済み」状態と同期されます。

元のコードが機能しなかった理由は、this.form.qq-upload-buttonJavaScriptが無効であるためです。this.form['qq-upload-button']代わりに使用する必要があります。ただし、上記で投稿したコードを使用すると、はるかにクリーンになります。

于 2012-06-22T23:08:42.323 に答える