CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvc-4
VladL
VladL

Reputation: 13033

Enable/disable range input

I have a range input which is defined this way:

@Html.LabelFor(m => Model.Quality, Resources.CompressionQuality)
<input type="range" name="Quality" id="Quality" data-mini="true" min="0" max="100" value="@Model.Quality">

and a dropdown:

@Html.LabelFor(m => Model.TiffCompression, Resources.TiffCompression)
@Html.DropDownListFor(m => Model.TiffCompression, tiffCompressions, Html.DataMiniAttribute())
@Html.ValidationMessageFor(m => Model.TiffCompression)

Depending on the DropDown selection I want to enable/disable the range input. Here is how I do it:

<script type="text/javascript">
    $(document).ready(function () {

        function ToggleSection() {
            var selectedVal = $('#TiffCompression').find('option:selected').val();
            $('#Quality').prop('disabled', true);

            switch (selectedVal) {
                case "JPEG":
                    $('#Quality').prop('disabled', false);
                    break;
            }
        }

        ToggleSection();
        $('#TiffCompression').change(function () { ToggleSection(); });
    });
</script>

The disabled property is really changed, but the control is not refreshed until I click on it. I've tried to call change(), different refreshes etc. on it but no luck.

How can I enable/disable it?

Upvotes: 0

Views: 5439

Answers (1)

VladL
VladL

Reputation: 13033

Not sure why it didn't work, but 

$('#Quality').slider('disable');

and

$('#Quality').slider("enable");

did the job.

Upvotes: 2

Related Questions