How to hide one field when the user enter data in

Question

I had one field something like Holiday such that is given below,

 [StringLength(50)]
 [DisplayName(Constants.DisplayName.HolidayDay)]
 public virtual string HolidayDay { get; set; }

And

 public virtual enumHolidayDay enumHolidayDay
 {
      get
      {
            return (enumHolidayDay)Enum.Parse(typeof(enumHolidayDay), HolidayDay);
      }
      set
      {
            HolidayDay = value.ToString();
      }
 }

And

public enum enumHolidayDay
{
    [Description("Saturday")]
    saturday = 1,

    [Description("Sunday")]
    sunday = 2,
}

And my Holiday.cshtml file is following

       <div class="row">
            <div class="col-md-3">
                <label for="" class="control-label">
                Set Holiday For </label><br />
                     @Html.EnumCheckBoxFor(m => m.enumHolidayDay)
            </div>
        </div>
       <br/>

        <div class="row">
            <div class="col-md-3">
                <label for="" class="control-label">
                    Day</label><br />
                @Html.TextBoxFor(model => model.HolidayDay, new { @class = "form-control"  
                                              }).DisableIf(() => Model.IsReadOnly == true)
            </div>
        </div> 

On my screen there are two checkboxes named Saturday and another one is Sunday. And one textbox named Day, But user can enter data in either one of it. One is mandatory. How to handle them, i.e. How to disable the Day field when the user click the any checkbox. And the Holiday field only used to these controls. In which event i have to handle it without using scripts and what are the code i need to add for this. Can anyone please help to find the solution...

Answer 1

Check bellow code

With jQUery

$('#checkboxId').click(function () {
    $("#txtholidy").toggle(!this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' id="checkboxId" checked='checked'>Sunday
</br></br><input type='textbox' id="txtholidy" style='display:none' >

Updated Without jQUery

function toggleControl()
{

  if(document.getElementById("checkboxId").checked == true)
    {
  document.getElementById("txtholidy").style.visibility="hidden";
      }
else
  {
  document.getElementById("txtholidy").style.visibility="visible";
  }
  }
  

<input type='checkbox' id="checkboxId" checked='checked' onClick="toggleControl()">Sunday
</br></br><input type='textbox' id="txtholidy" style="visibility:hidden" >