CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-4
Binoy Kumar
Binoy Kumar

Reputation: 432

How To hide and show fields according to value from check box on edit page

I am Having a page in which i should hide or show fields like 1 dropdown and 1 text box by the value from a radio button. Its working fine in the AddUser page but when editing the User, at that time it is not working . Can some one help me how to check a condition on page load itself 

<label class="form>
        Active
   @Html.RadioButtonFor(m => m.IsActive, true, new { onclick = "Hide()" })


        </label>
   <label class="form">
      InActive
     @Html.RadioButtonFor(m => m.IsActive, false, new { onclick="Show()"})


          </label>

function Hide()
    {
        $('#Reasondiv').hide();
    }
    function Show()
    {
        $('#Reasondiv').show();
    }

while Loading the edit page itself i need to check whether the IsActive is true or false so that according to it I can show or hide the divs

Upvotes: 1

Views: 84

Answers (1)

vijayP
vijayP

Reputation: 11502

With JQuery approach you need to modify your HTML a bit and need to add few more lines of code as follows for edit page:

HTML:

<label class="form ActiveRadioContainer">
        Active
   @Html.RadioButtonFor(m => m.IsActive, true, new { onclick = "Hide()" })
        </label>
<label class="form InActiveRadioContainer">
      InActive
    @Html.RadioButtonFor(m => m.IsActive, false, new { onclick="Show()"})
</label>

added separate classes as ActiveRadioContainer and InActiveRadioContainer and then addition JQuery code needed:

$(document).ready(function(){
    var isActive = $(".ActiveRadioContainer input[type=radio]").is(":checked");

    if(isActive){
        $('#Reasondiv').hide();
    }
    else
    {
        $('#Reasondiv').show();
    }
});

Upvotes: 1

Related Questions