Instability in script to hide / show fields

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 hidden and if I check the 'DN' checkbox the 'Numero' and 'Observacao' fields appear. But I have two small problems: If I uncheck the checkbox the two fields will not disappear. And if I leave it checked and I try to save it, when I click the save button, the two fields disappear and the message that the field is obligatory that should appear does not appear. That is, when it saves and does not pass, it loads 'hide' again. How to correct these two instabilities?