2

I am using valums file uploader. But I want to initiate a checkbox, to disable the upload button if user hasnt checked it.

I can get it working in a regular form, but not using valums because I think, he uses div elements as form attributes.. so I am guessing I have screwed my code up.

In html I have:

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

In fileuploader.js ( valums code I have )

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>',

Can you spot what I have cocked up ?

Essentially, I wish to disable upload button if user has not checked the checkbox.

For a regular form, this code works:

<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>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
422
  • 5,714
  • 23
  • 83
  • 139

1 Answers1

4

Remove the inline onclick handler and add the following JavaScript code:

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

This synchronizes the 'disabled' state with the negated 'checked' state of the checkbox.

The reason why your original code didn't work is that this.form.qq-upload-button is invalid JavaScript. You'd have to use this.form['qq-upload-button'] instead. However, using the code I posted above is much cleaner.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • Thankyou @ThiefMaster , so do I get rid of the code within the ? – 422 Jun 22 '12 at 23:16
  • +1 Nice. But is `.on()` really needed? Couldn't `.change()` be used? – iambriansreed Jun 22 '12 at 23:16
  • @422 Just remove the onchange attribute. – iambriansreed Jun 22 '12 at 23:17
  • 2
    @iambriansreed: It's the cleanest and suggested way as of jQuery 1.7+. You can use `.change(...)` instead of `.on('change', ...)` if you prefer it. – ThiefMaster Jun 22 '12 at 23:17
  • So now I have , and in js I have your code. But it doesnt do anything, Its early saturday morning here lol – 422 Jun 22 '12 at 23:20
  • I thought `.on()` was a replacement for `.live()` and `.delegate()` which it is but probably should be used for all event handling for consistency. – iambriansreed Jun 22 '12 at 23:22
  • With only two arguments it binds a normal event. – ThiefMaster Jun 22 '12 at 23:23
  • Guys could you please elaborate on your answers, this is confusing now. I will create fiddle.. of sorts – 422 Jun 22 '12 at 23:24
  • 1
    @iambriansreed: Its not only consistency and `live()` was never to be used really due to it's many drawbacks. See this for details on the different bindings: http://stackoverflow.com/questions/11148019/what-are-the-significant-differences-among-sel-bindclick-sel-click/11148053#11148053 – Nope Jun 22 '12 at 23:25
  • Still a no go. Argghh I just know this answer is the right one, I just cant get it to play ball. If I posted a site link would you guys have a quick look please ? – 422 Jun 22 '12 at 23:40
  • When I say the above, I mean thats my raw code. Without his code added, to show the issue. – 422 Jun 22 '12 at 23:53
  • Ok Now the link above uses your code. But , I have to click the checkbox then uncheck it to make it disable the button. – 422 Jun 23 '12 at 00:01