title: How to show/hide an element in real time (Blazor)?
body: <p>I have an image I would like to display only after a user has filled in all text fields.</p>
  <p>I have tried using <code>disabled</code> attribute, but that does not seem to work. Any other insights?</p>
  <p>Here is my current code:</p>
  <pre><code>&lt;EditForm EditContext=&quot;@EditContext&quot; style=&quot;max-width:800px;&quot; onkeydown=&quot;javascript: DisableEnterKey();&quot;&gt;
              &lt;FluentValidator /&gt;
  
              &lt;img src=&quot;images/approval-16-grey.ico&quot; alt=&quot;Image&quot; disabled=&quot;@OkayDisabled&quot;&gt;
  
  
              &lt;p class=&quot;statp&quot;&gt;How many families and/or individuals are living on your land?&lt;/p&gt;&lt;br /&gt;
  
              &lt;label class=&quot;statlabel&quot; for=&quot;amountOfFamilies&quot;&gt;Amount of families:&lt;/label&gt;&lt;br /&gt;
              &lt;InputNumber id=&quot;fams&quot; for=&quot;indivNum&quot; class=&quot;input&quot; @bind-Value=&quot;@familyData.IndividualAmount&quot; onwheel=&quot;this.blur()&quot; placeholder=&quot;Families...&quot; autofocus /&gt;
              &lt;ValidationMessage For=&quot;() =&gt; familyData.IndividualAmount&quot; /&gt;
  
              &lt;br /&gt;&lt;hr class=&quot;statHR&quot; /&gt;
  
              &lt;label class=&quot;statlabel&quot; for=&quot;amountOfIndividuals&quot;&gt;Amount of single individuals: &lt;/label&gt;&lt;br /&gt;
              &lt;InputNumber id=&quot;individuals&quot; for=&quot;famNum&quot; class=&quot;input&quot; @bind-Value=&quot;@familyData.FamilyAmount&quot; onwheel=&quot;this.blur()&quot; placeholder=&quot;Individuals...&quot;/&gt;
              &lt;ValidationMessage For=&quot;() =&gt; familyData.FamilyAmount&quot; /&gt;
  
              &lt;br /&gt;&lt;hr class=&quot;statHR&quot; /&gt;
  
              &lt;label class=&quot;statlabel&quot; for=&quot;names&quot;&gt; Please enter all of the names here:&lt;/label&gt;&lt;br /&gt;
              &lt;InputTextArea id=&quot;names&quot; class=&quot;textArea&quot; rows=&quot;4&quot; cols=&quot;18&quot; @bind-Value=&quot;@PersonName&quot; placeholder=&quot;Names of all individuals...&quot; /&gt;
              &lt;ValidationMessage For=&quot;() =&gt; familyData.PersonName&quot; /&gt;
  
  
          &lt;/EditForm&gt;
  
          &lt;/div&gt;
      &lt;/ul&gt;
  
  
      @code 
      {
          private EditContext? EditContext;
          public FamilyData Model = new FamilyData();
  
          protected string OkayDisabled { get; set; } = &quot;disabled&quot;;
  
          protected override void OnInitialized()
          {
              EditContext = new EditContext(Model);
              EditContext.OnFieldChanged += EditContext_OnFieldChanged;
  
              base.OnInitialized();
          }
  
          protected override void OnAfterRender(bool firstRender)
          {
              base.OnAfterRender(firstRender);
  
              SetOkDisabledStatus();
          }
  
          private void EditContext_OnFieldChanged(object? sender, FieldChangedEventArgs e)
          {
              SetOkDisabledStatus();
          }
  
          private void SetOkDisabledStatus()
          {
              if(EditContext.Validate())
              {
                  OkayDisabled = null;
              }
              else
              {
                  OkayDisabled = &quot;disabled&quot;;
              }
          }
      }
  </code></pre>