Home/ Questions/Q 8591459
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:32:00+00:00

So I have a form two two inputs, Free and Price. Free is a

  • 0

So I have a form two two inputs, “Free” and “Price”. Free is a checkbox, and if the box is checked then the Price box should not show, if it is unchecked then the price box should show.

I can easily hook the onChecked and toggle the visibility on and off after the page has loaded, but the question is pre-loading what is the best practise.

From what I can tell theres three main solutions here :-

  1. Set an inline style to set the visibility based on the starting model, ie @(model.Free?”hidden”:”visibile”) this just seems sort of bad practise since isn’t CSS supposed to be seperated from structure, this kinda mixes the two a little.

  2. Set a jQuery handler to fire on load to check the checkbox status, the problem with this approach is that theres a few seconds before it fires so you get a “flicker”

  3. Some other thing I’m missing…

Any advice?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1.

    Most css styles are better off separated into an external stylesheet, but for a simple style="display:none;", inline styles are fine.

    Also, as of MVC4, if a variable is null, Razor won’t render the attribute.

    @{
    var displayIt = Model.Free ? "display:none;" : null;
}
<div style="@displayIt">
    The above style attribute will not be rendered when displayIt is null
    (in MVC4)
</div>
    • 0