Script instability to hide/show fields

Asked

Viewed 266 times

0

I have the following script:

    @Scripts.Render("~/bundles/jquery")
<script>
    $(document).ready(function () {

        $('.ocultar').hide();

        $('#dn').change(function () {
            if ($("#dn").attr("checked",true)) {
                $('.ocultar').show();
            }
            else {
                $('.ocultar').hide();
            }
        });
    });


<div id="dn">
    @Html.CheckBoxFor(x => x.DN) <b>Dpto. Nacional </b>
</div> 

    <div><br /></div>
<div class="ocultar">
  <b> Número do Ofício </b> 
</div>
<div class="ocultar">
    @Html.EditorFor(x => x.Numero)
     @Html.ValidationMessageFor(x => x.Numero)
</div>
    <div class="ocultar">
  <b> Observacao </b> 
</div>
<div class="ocultar">
    @Html.TextAreaFor(x => x.Observacao)
</div>

The script works fine. Load the page with the fields in hidden and if I check the checkbox 'DN' the fields 'Number' and 'Note' appear. But I have two small problems: If I uncheck the checkbox the two fields do not disappear. And if I leave marked and try to save, when clicking the save button, the two fields disappear and the message that the field is required that should appear, does not appear. That is, when saved and does not pass, load the 'Hide' again. How to correct these two instabilities?

javascript asp.net

1 answer

2

The error is on this line:

if ($("#dn").attr("checked",true)) {

The $("#dn").attr("checked",true) marks the checkbox as checked, and still returns an object, which will make the execution always enter the if and never in the else. The solution is very simple:

if ($("#dn").prop("checked")) {

Just don’t pass the value, that the method attr returns the current value. But note that I switched to prop, which returns the current state of the DOM, not what is in the source code of your HTML. This is the recommended way to check the checkbox status.

  • Got @bfavaretto. I made the change to 'prop' but when testing and clicking the checkbox nothing happens. Hidden fields do not appear. Something else is missing?

  • Now that I realize #dn is a div. Try to change to $('#dn input').change... (swap all)

  • Ok @bfavaretto , solves one of the problems that is: if I mark the fields appear, if I clear the fields disappear. Beauty. But continues the other. If I try to save without filling the field 'Number' the fields disappear, so the mandatory message also in hidden understands?

  • In fact now the question becomes the $('.hide'). Id(); When I click on save but does not change the form due to validation failure, it is as if I am entering the form for the first time, that is, load the 'Hide'. How to understand that this is not the first load of the screen, but that it was validation failure and the fields should remain visible and with the apparent error message? @bfavaretto

  • @Pfvictor I think this is worth a separate question, it’s another problem.

Browser other questions tagged javascript asp.net

You are not signed in. Login or sign up in order to post.