Tag: jQuery

JQuery multiple files upload in asp.net and C# using Ajax form

In this article we will discuss about the files uploading in the asp.net. Asp.net provides the FileUpload control and you can use this with a small amount of code lines for uploading the documents. However there are many other ways to upload the files using the several jQuery,flash and Ajax plugins. In the following you can see a such a script that use the Ajax form plugin. Continue reading “JQuery multiple files upload in asp.net and C# using Ajax form”

Restrict selection of some options in select element without disabled attribute using jQuery

last day, One of my friend was facing a strange problem in the select element. His select element has some disabled options( using the disabled attribute), and element is working fine every where but failed in the safari (ipad) and also disabled attribute is not supported in Internet Explorer 7 and earlier versions.

disable options without disabled

After implementing some other possible solution we have found a way to restrict selection of some options in select element without disabled attribute using jQuery. In the below example we are using the .change() jQuery event of the select element.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript">
        $(function() {
            var lastSel = $("#ddlType option:selected");
            $("#ddlType").change(function(event) {
 
                if ($("#ddlType option:selected").index() > 1) {
                    event.preventDefault();
                    event.stopPropagation();
                    lastSel.attr("selected", true);
                    return false;
                }
                else {
                    lastSel = $("#ddlType option:selected");
                }
            });
        });
    </script>
    <style>
        .disablectrl
        {
            color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody><tr><td width="205">
            <select style="width: 230px;" id="ddlType">
                <option value="0" selected="selected">---Choose Program Type---</option>
                <option value="TEXT">Text</option>
                <option value="BASIC" class="disablectrl">Basic </option>
                <option value="ADVANCED" class="disablectrl">Advanced </option>
                <option value="SCORM" class="disablectrl">Program</option>
            </select>
          </td></tr></tbody>
    </table>
</body>
</html>

In the .change() event, code check the selected index if the condition does’t meet, code set the old selected value in the select element.