jQuery Filer: how to disable/enable on my form

Question

Hi I'm implementing a form with a file upload box on my page. I've decided to use the jQuery Filer plugin and it works great. I would like to be able to make the file uploader disabled or enabled based on a radio button but can't figure out how to disable the function of the plugin.

Any help would be great.

not sure what code to include, the file uploader itself is called with an input:

<input type="file" name="files[]" id="file_uploader" disabled="true" multiple="multiple">

The js I'm trying that isn't working is:

$('#file_uploader).disabled = 'disabled';

It's not working though... Thoughts?

---

STILL NOT WORKING!

Here's the code as I have it now:

function enable_img(status){
    if (status=='true'){
            $("#img_desc").prop('disabled', false);
            $("#img_desc").attr("placeholder", "Add a description for image(s)");
            $("#img_file").prop("disabled", false);
    } else {
            $("#img_desc").prop("disabled", true);
            $("#img_desc").attr("placeholder", "");
            $("#img_desc").val("");
            $("#img_file").prop("disabled", true);

    }*/
}

and the html part:

<div class="form-group">
    <label for="img_req" class="col-md-3 control-label">Do you want to add an image??</label>
    <div class="col-md-8">
        <div class="btn-group" data-toggle="buttons" id="img_req">
            <label class="btn btn-primary">
                <input type="radio" name="options" id="img_yes" autocomplete="off" onchange="enable_img('true');"> Yes
            </label>
            <label class="btn btn-primary active">
                <input type="radio" name="options" id="img_no" autocomplete="off"  onchange="enable_img('false')" checked> No
            </label>
        </div>
        <br></br>
        <textarea class="form-control" rows="3" id="img_desc" placeholder="" disabled="true"></textarea>
    </div>
    <label for="img_file" class="col-md-3 control-label">Image File(s)</label>
    <div class="col-md-8">
        </br>
        <div class="input-group">
            <input type="file" name="files[]" id="img_file" disabled="true" multiple="multiple">
        </div>
    </div>
</div>

The #img_desc changes fine and become diasbled and enabled as expected but nothing happens to the #img_file. Any help would be great!

Answer 1

1. You should use the prop function on the element you wish to disable.
2. I guess you want this to happen on check/uncheck a checkbox so I also added an example for this.

$('#chk1').on('change', function() {
   $('#file_uploader').prop('disabled', !$(this).is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="chk1" /> enable/disable<br />

<input type="file" name="files[]" id="file_uploader" disabled="true" multiple="multiple">