locked
Disable button RRS feed

  • Question

  • User364663285 posted

    Hi,

    How can I disable button below, within Code behind?

    $(function () {
        $("#tb_birth").datepicker({
            dateFormat: "dd/mm/yy",
            changeYear: true,
            showOn: "button",
        }).next('button').text('').button({
            icons: {
                primary: 'ui-icon-calendar'
            },
            label: "Select a date",
            text: false
        });
    });
    Tuesday, January 2, 2018 1:03 PM

Answers

  • User-1768369891 posted

    wmec

    The following is the current codes but problem persists after re-deployment.

    You not change your code as i suggest you, look again and change your code. It working my side. 

    $(function () {
        $("#tb_birth").datepicker({
            dateFormat: "dd/mm/yy",
            changeYear: true,
            showOn: "button",
        }).next('button').text('').button({
            icons: {
                primary: 'ui-icon-calendar'
            },
            label: "选择日期",
            text: false
        });
    		var isreadonly = getParameterByName('readonly');
            if (isreadonly == "y") {
                $("#mybutton").attr("disabled", "disabled")
            }
         
            if (isreadonly == "y") {
                $("#tb_birth").datepicker("disable");
            }
    	
        });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 8, 2018 4:35 AM

All replies

  • User753101303 posted

    Hi,

    We would need to know how this button is declared on the server side. If this is an HtmlButton try :

     https://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlcontrol.disabled(v=vs.110).aspx

    (or is this just raw HTML markup in which case for now you can't access at all to this button from your code behind).

    Tuesday, January 2, 2018 3:05 PM
  • User475983607 posted

    How can I disable button below, within Code behind?

    It is not possible to answer this question as you have not provided the markup or the the server side technology you are using.

    Tuesday, January 2, 2018 3:08 PM
  • Wednesday, January 3, 2018 2:20 AM
  • User-832373396 posted

    Hi <g class="gr_ gr_80 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="80" data-gr-id="80">wmec</g>,

    After executing this code at your online page, then the button is disabled;

    (note: I add this line code, at Console of browser after F12)

    $("#mybutton").attr("disabled", "disabled")
    <button type="button" class="ui-datepicker-trigger
    ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button"
    aria-disabled="true" title="Select a date" id="mybutton" disabled="disabled"><span class="ui-button-icon-primary
    ui-icon ui-icon-calendar"></span><span class="ui-button-text">Select a date</span></button>

    The first step, I added id attr to this button, then executing the js code at console;

    Let me know if any question :)

    With regards, Angelina Jolie

    Wednesday, January 3, 2018 7:10 AM
  • User364663285 posted

    Hi,

    Can we add (or trigger) such codes in Code behind? Please advise.

    Wednesday, January 3, 2018 7:19 AM
  • User-832373396 posted

    Hi wmec,

    Sir, Of course, yes. 

    Add this line js to your js and everything will be ok!

    $(function(){

    $("#mybutton").attr("disabled", "disabled")

    })

    and why I put in the console is just for testing online with your page;

    Learn how to debug at Browser Console.

    https://developer.mozilla.org/en-US/docs/Tools/Browser_Console 

    Bests,

    Jolie

    Wednesday, January 3, 2018 7:59 AM
  • User364663285 posted

    Sorry, Is it fine to add your codes to this part?

    $(function () {
    
        $("#tb_birth").datepicker({
    
            dateFormat: "dd/mm/yy",
    
            changeYear: true,
    
            showOn: "button",
    
        }).next('button').text('').button({
    
            icons: {
    
                primary: 'ui-icon-calendar'
    
            },
    
            label: "Select a date",
    
            text: false
    
        });
    
    });
    
    
    Wednesday, January 3, 2018 9:27 AM
  • User753101303 posted

    You could.

    What you want is confusing? "code behind" is usually server side C# (or VB.NET) code and it dépends on how the control is declared in your ASPX markup.

    Last suggestions are client side JavaScript suggestions.

    It really depends when you want this to happen.

    Wednesday, January 3, 2018 9:31 AM
  • User-832373396 posted

    Hi <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">wmec</g>,

    I guess that you want this:

    $("#tb_birth").datepicker({
    
            dateFormat: "dd/mm/yy",
    
            changeYear: true,
    
            showOn: "button",
    
        }).next('button').text('').button({
    
            icons: {
    
                primary: 'ui-icon-calendar'
    
            },
    
            label: "Select a date",
    
            text: false
    
        })
     .on( "change", function() {
            $("#mybutton").attr("disabled", "disabled")
    })

    if still not, I suggest that you could learn https://jqueryui.com/datepicker/#date-range 

    With regards, Angelina Jolie

    Wednesday, January 3, 2018 9:35 AM
  • User364663285 posted

    Hi Angelina,

    I want to disable it below

    http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc4&readonly=y

    due to parameter value 

    readonly=y

    How?

    Wednesday, January 3, 2018 10:04 AM
  • User-1768369891 posted

    I want to disable it below

    http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc4&readonly=y

    due to parameter value 

    readonly=y

    I think in your case server side is batter for disability of control for security purpose. 

    Check out my example...

     aspx code

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .auto-style1 {
                width: 50%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
            <table class="auto-style1">
                <tr>
                    <td>
                        <table class="auto-style1">
                            <tr>
                                <td>
                                    <asp:Label ID="lblName" Text="Input 1" runat="server"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="txt1" runat="server"></asp:TextBox>
                                </td>
                                 <td>
                                    <asp:Button ID="btn1" runat="server" Text="Button 1" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="Label1" Text="Input 2" runat="server"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                                </td>
                                 <td>
                                    <asp:Button ID="Button1" runat="server" Text="Button 2" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="Label2" Text="Input 3" runat="server"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                                </td>
                                 <td>
                                    <asp:Button ID="Button2" runat="server" Text="Button 3" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="Label3" Text="Input 4" runat="server"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                                </td>
                                 <td>
                                    <asp:Button ID="Button3" runat="server" Text="Button 4" />
                                </td>
                            </tr>                       
                        </table>
                     </td>                
                </tr>
            </table>
        
        </div>
        </form>
    </body>
    </html>
    

    C# code 

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebApplication8
    {
        public partial class WebForm3 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (Request.QueryString["readonly"] != null && Request.QueryString["readonly"].ToString() == "y")
                {
                    foreach(var control in form1.Controls)
                    {
                        if(control is Button)
                        {                        
                            Button btn = (Button)control;
                            btn.Enabled = false;
                        }
                    }
                }
            }
        }
    }

      

    Wednesday, January 3, 2018 12:19 PM
  • User364663285 posted

    Thanks a lot.

    How to specifically refer to highlighted button below?

    https://app.box.com/s/jpfu3g14vg94fzk61lej5s159a06ckq3

    Wednesday, January 3, 2018 1:10 PM
  • User364663285 posted

    Any help?

    Thursday, January 4, 2018 6:38 AM
  • User-832373396 posted

    Hi wmec,

    http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc4&readonly=y

    due to <g class="gr_ gr_88 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="88" data-gr-id="88">parameter value</g> 

    readonly=y

    Based on your current requirement, it could be:

    function GetURLParameter(sParam)
    {
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++)    {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam)
            {
                return sParameterName[1];
            }
        }
    }​
    $(function(){
    
    //if current url is: http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc4&readonly=y
    
      var isreadonly= getUrlParameter('readonly');
      if(isreadonly=="y"){
       $("#mybutton").attr("disabled", "disabled")
       }
    
    })
    

    Bests, 

    Jolie

    Thursday, January 4, 2018 9:15 AM
  • User364663285 posted

    Sorry, how to correct this?

    $(function () {
    
        $("#tb_birth").datepicker({
    
            dateFormat: "dd/mm/yy",
    
            changeYear: true,
    
            showOn: "button",
    
        }).next('button').text('').button({
    
            icons: {
    
                primary: 'ui-icon-calendar'
    
            },
    
            label: "选择日期",
    
            text: false
    
        }
    
        }).on("change", function () {
    
            var isreadonly= getUrlParameter('readonly');
    
            if(isreadonly=="y"){
    
                $("#mybutton").attr("disabled", "disabled")
    
    
    
        });
    
    
    Thursday, January 4, 2018 10:26 AM
  • User-1768369891 posted

    wmec

    How to specifically refer to highlighted button below?

    https://app.box.com/s/jpfu3g14vg94fzk61lej5s159a06ckq3

    Its also very simple just disable your text box like....

    if (Request.QueryString["readonly"] != null && Request.QueryString["readonly"].ToString() == "y")
                {
                    foreach(var control in form1.Controls)
                    {
                        if(control is Button)
                        {                        
                            Button btn = (Button)control;
                            btn.Enabled = false;
                        }
                    }
                    tb_birth.Enabled = false;
                }

    and disable date picker on client side like.. 

    $(function () {
        $("#tb_birth").datepicker({
            dateFormat: "dd/mm/yy",
            changeYear: true,
            showOn: "button",
        }).next('button').text('').button({
            icons: {
                primary: 'ui-icon-calendar'
            },
            label: "选择日期",
            text: false
        }).on("change", function () {
            $("button").attr("disabled", "disabled")
    
        });
    			var isreadonly= getUrlParameter('readonly');			
    			 if(isreadonly=="y"){
    				$("#tb_birth").datepicker("disable");
    			}
    	});

    Thursday, January 4, 2018 11:07 AM
  • User364663285 posted

    Hi,

    How to correct it below?

    https://app.box.com/s/9q3x5jb0jz6kojskh078jzc0gapj58av

    Friday, January 5, 2018 1:52 AM
  • User-1768369891 posted

    post your code..

    Friday, January 5, 2018 5:30 AM
  • User364663285 posted

    I have codes like

    $(function () {
        $("#tb_birth").datepicker({
            dateFormat: "dd/mm/yy",
            changeYear: true,
            showOn: "button",
        }).next('button').text('').button({
            icons: {
                primary: 'ui-icon-calendar'
            },
            label: "选择日期",
            text: false
        }).on("change", function () {
            var isreadonly = getUrlParameter('readonly');
            if (isreadonly == "y") {
                $("#mybutton").attr("disabled", "disabled")
            }
            var isreadonly = getUrlParameter('readonly');
            if (isreadonly == "y") {
                $("#tb_birth").datepicker("disable");
            }
        });
        });
    

    but after deployment, I still cannot disable the button next to date field below.

    http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc4&readonly=y

    Friday, January 5, 2018 6:21 AM
  • User-1768369891 posted

    but after deployment, I still cannot disable the button next to date field below.

    Because not able to get query string values.

     change your code like..

    $(function () {
        $("#tb_birth").datepicker({
            dateFormat: "dd/mm/yy",
            changeYear: true,
            showOn: "button",
        }).next('button').text('').button({
            icons: {
                primary: 'ui-icon-calendar'
            },
            label: "选择日期",
            text: false
        }).on("change", function () {
            var isreadonly = getParameterByName('readonly');
            if (isreadonly == "y") {
                $("#mybutton").attr("disabled", "disabled")
            }
         
            if (isreadonly == "y") {
                $("#tb_birth").datepicker("disable");
            }
        });
        });
    
      function getParameterByName(name, url) {
                if (!url) url = window.location.href;
                name = name.replace(/[\[\]]/g, "\\$&");
                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, " "));
            }
    
    
    Friday, January 5, 2018 9:19 AM
  • User364663285 posted

    I put the codes, but after re-deployment, problem still persists.

    Friday, January 5, 2018 9:40 AM
  • User-1768369891 posted

    Change below code..

    $(function () {
        $("#tb_birth").datepicker({
            dateFormat: "dd/mm/yy",
            changeYear: true,
            showOn: "button",
        }).next('button').text('').button({
            icons: {
                primary: 'ui-icon-calendar'
            },
            label: "选择日期",
            text: false
        });
    		var isreadonly = getParameterByName('readonly');
            if (isreadonly == "y") {
                $("#mybutton").attr("disabled", "disabled")
            }
         
            if (isreadonly == "y") {
                $("#tb_birth").datepicker("disable");
            }
    	
        });

    Friday, January 5, 2018 10:56 AM
  • User364663285 posted

    The following is the current codes but problem persists after re-deployment.

    $(function () {
        $("#tb_birth").datepicker({
            dateFormat: "dd/mm/yy",
            changeYear: true,
            showOn: "button",
        }).next('button').text('').button({
            icons: {
                primary: 'ui-icon-calendar'
            },
            label: "选择日期",
            text: false
        }).on("change", function () {
            var isreadonly = getParameterByName('readonly');
            if (isreadonly == "y") {
                $("#mybutton").attr("disabled", "disabled")
            }
    
            if (isreadonly == "y") {
                $("#tb_birth").datepicker("disable");
            }
        });
    });
    
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    
    Friday, January 5, 2018 1:31 PM
  • User-1768369891 posted

    wmec

    The following is the current codes but problem persists after re-deployment.

    You not change your code as i suggest you, look again and change your code. It working my side. 

    $(function () {
        $("#tb_birth").datepicker({
            dateFormat: "dd/mm/yy",
            changeYear: true,
            showOn: "button",
        }).next('button').text('').button({
            icons: {
                primary: 'ui-icon-calendar'
            },
            label: "选择日期",
            text: false
        });
    		var isreadonly = getParameterByName('readonly');
            if (isreadonly == "y") {
                $("#mybutton").attr("disabled", "disabled")
            }
         
            if (isreadonly == "y") {
                $("#tb_birth").datepicker("disable");
            }
    	
        });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 8, 2018 4:35 AM