I tried to show and hide a button in <fieldset> by a javascript function.But it is not working.I did not find my mistake.

My FieldSet :

<fieldset class="buttons">
  <dx:ASPxButton ID="btn11" runat="server" Text="Buton 1">
  </dx:ASPxButton>
</fieldset>

My checkbox :

<input class="checkbox" id="ShowHideButton" name="ShowHideButton" type="checkbox" onchange="valueChanged()" />
<label for="ShowHideButton">ShowHideButton</label>

And my JavaScript function.

<script type="text/javascript">
  function valueChanged() {
    if ($('#ShowHideButton').is(":checked"))
      $(".buttons").show();
    else
      $(".buttons").hide();
  }
</script>

I tried to show and hide a button in <fieldset> by a javascript function.But it is not working.I did not find my mistake.

My FieldSet :

<fieldset class="buttons">
  <dx:ASPxButton ID="btn11" runat="server" Text="Buton 1">
  </dx:ASPxButton>
</fieldset>

My checkbox :

<input class="checkbox" id="ShowHideButton" name="ShowHideButton" type="checkbox" onchange="valueChanged()" />
<label for="ShowHideButton">ShowHideButton</label>

And my JavaScript function.

<script type="text/javascript">
  function valueChanged() {
    if ($('#ShowHideButton').is(":checked"))
      $(".buttons").show();
    else
      $(".buttons").hide();
  }
</script>

• javascript
• jquery
• asp
• checkbox

• Have you inspect the page and see what is the state of fieldset and what is the state of dx:ASPxButton ? – kostas ch. Commented Nov 20, 2013 at 12:04
• See for any errors in console. ctrl+shift+j in google chrome. – Subin Jacob Commented Nov 20, 2013 at 12:19
• @Mehmet Akyel can you give jsfiddle. – Prateek Commented Nov 20, 2013 at 12:31

3 Answers 3

On the client side the actual id of the button won't be ShowHideButton ASP will generate a unique one for it.

You need to access it via clientid in your javascript.

Try this:

function valueChanged()
{
    if ($('#<%=ShowHideButton.ClientID%>').is(":checked"))
        $(".buttons").show();
    else
        $(".buttons").hide();

}

try to use

http://jsfiddle/modaloda/7ZNzF/

$(document).ready(function() {
//set initial state.
$('#ShowHideButton').val($(this).is(':checked'));

$('#ShowHideButton').change(function() {
    if($(this).is(":checked")) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    }else{
        alert("sd");
    }
    $('#ShowHideButton').val($(this).is(':checked'));        
});
});

Thank you guys.I solved.I am a stupid I forgot add this library

<script src="//ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>