Checkbox disabled attribute in ASP.NET MVC

My ViewModel has a property of selected and selectable. Both are boolean. I would like my view to have a checkbox that is enabled when selectable is true and disabled when selectable is false. What is the proper razor syntax to accomplish this ?

I tried the code below on a list of items in a table. Every row comes back with a disabled checkbox regardless of selectable value.

 @Html.CheckBoxFor(modelItem => item.Selected, new { @disabled = !item.Selectable })

edited Jan 6 '14 at 0:01

Dalorzo

16.2k64388

asked Jan 5 '14 at 23:46

Bill Greer

1,28952553

1

Question: What is item? I see on your lambda that you have modelItem => item.Selected, but is item independent from the model itself? Or perhaps you meant to say modelItem => modelItem.Selected?

– EfrainReyes
Jan 6 '14 at 0:14

add a comment |

I tried the code below on a list of items in a table. Every row comes back with a disabled checkbox regardless of selectable value.

 @Html.CheckBoxFor(modelItem => item.Selected, new { @disabled = !item.Selectable })

edited Jan 6 '14 at 0:01

Dalorzo

16.2k64388

asked Jan 5 '14 at 23:46

Bill Greer

1,28952553

1

Question: What is item? I see on your lambda that you have modelItem => item.Selected, but is item independent from the model itself? Or perhaps you meant to say modelItem => modelItem.Selected?

– EfrainReyes
Jan 6 '14 at 0:14

add a comment |

I tried the code below on a list of items in a table. Every row comes back with a disabled checkbox regardless of selectable value.

 @Html.CheckBoxFor(modelItem => item.Selected, new { @disabled = !item.Selectable })

edited Jan 6 '14 at 0:01

Dalorzo

16.2k64388

asked Jan 5 '14 at 23:46

Bill Greer

1,28952553

I tried the code below on a list of items in a table. Every row comes back with a disabled checkbox regardless of selectable value.

 @Html.CheckBoxFor(modelItem => item.Selected, new { @disabled = !item.Selectable })

c# asp.net-mvc razor

edited Jan 6 '14 at 0:01

Dalorzo

16.2k64388

asked Jan 5 '14 at 23:46

Bill Greer

1,28952553

edited Jan 6 '14 at 0:01

Dalorzo

16.2k64388

asked Jan 5 '14 at 23:46

Bill Greer

1,28952553

edited Jan 6 '14 at 0:01

Dalorzo

16.2k64388

edited Jan 6 '14 at 0:01

Dalorzo

16.2k64388

edited Jan 6 '14 at 0:01

Dalorzo

16.2k64388

asked Jan 5 '14 at 23:46

Bill Greer

1,28952553

asked Jan 5 '14 at 23:46

Bill Greer

1,28952553

asked Jan 5 '14 at 23:46

Bill Greer

1,28952553

1

Question: What is item? I see on your lambda that you have modelItem => item.Selected, but is item independent from the model itself? Or perhaps you meant to say modelItem => modelItem.Selected?

– EfrainReyes
Jan 6 '14 at 0:14

add a comment |

1

Question: What is item? I see on your lambda that you have modelItem => item.Selected, but is item independent from the model itself? Or perhaps you meant to say modelItem => modelItem.Selected?

– EfrainReyes
Jan 6 '14 at 0:14

Question: What is item? I see on your lambda that you have modelItem => item.Selected, but is item independent from the model itself? Or perhaps you meant to say modelItem => modelItem.Selected?

– EfrainReyes
Jan 6 '14 at 0:14

add a comment |

3 Answers
3

active

oldest

votes

It is not easy to achieve this with an if condition inside the helper method because all the below markups will render a disabled chechbox.

<input type="checkbox" disabled>

<input type="checkbox" disabled="disabled">

<input type="checkbox" disabled="false">

<input type="checkbox" disabled="no">

<input type="checkbox" disabled="enabled">

This should work in the razor. Simple If condition and rendering what you want.

@if(item.Selected)

{ 

  @Html.CheckBoxFor(modelItem => item.Selected)

}

else

{

    @Html.CheckBoxFor(modelItem => item.Selected, new { @disabled = "disabled"})

}

You may consider writing a custom html helper which renders the proper markup for this.

answered Jan 6 '14 at 0:03

Shyju

146k87331441

2

For HTML5 I write new { @disabled = "" } as <input type="checkbox" disabled /> is valid and used by W3C in their samples.

– ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Feb 28 '17 at 15:56

stackoverflow.com/a/38366971/4594225

– Ali
Jul 14 '18 at 15:12

add a comment |

This won't work because <input disabled="anything" /> will result in a disabled control. You need to only have a @disabled property when it should be disabled.

Try something like this:

@Html.CheckBoxFor(modelItem => item.Selected, item.Selectable ?  (object)new {} :  (object)new { @disabled = "disabled" })

Note that you might need to cast to (object)

edited Nov 20 '18 at 23:21

ealfonso

3,01222239

answered Jan 6 '14 at 0:03

Daniel Little

11.9k95683

This is a much cleaner option than the selected answer. You do need to cast as object; in my case I had this working: @Html.EditorFor(p => item.Selected, new {htmlAttributes = item.Selectable ? (object)new { } : (object)new { @disabled = "disabled" }})

– Ian
Mar 4 '15 at 9:29

1

You might just be able to go new object() on the left side

– Daniel Little
Mar 4 '15 at 10:15

add a comment |

Sorry, my previous answer was wrong.

The input-element will be disabled as soon as it gets the attribute disabled. It doesn't matter if the value is true, false. In HTML you can't set disabled to false.

So you will have to set the disabled attribute only when the condition is valid.

something like:

object attributes = null;

if (!item.Selectable)

{

    attributes = new { disabled = "disabled"};

}

@Html.CheckBoxFor(modelItem => item.Selected, attributes)

edited Jan 6 '14 at 0:03

answered Jan 5 '14 at 23:58

Pbirkoff

3,90121518

I tried your recommendation. Everything comes back as disabled.

– Bill Greer
Jan 6 '14 at 0:02

1

you probably need @ prefixes

– ealfonso
Aug 4 '14 at 1:33

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f20940746%2fcheckbox-disabled-attribute-in-asp-net-mvc%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

It is not easy to achieve this with an if condition inside the helper method because all the below markups will render a disabled chechbox.

<input type="checkbox" disabled>

<input type="checkbox" disabled="disabled">

<input type="checkbox" disabled="false">

<input type="checkbox" disabled="no">

<input type="checkbox" disabled="enabled">

This should work in the razor. Simple If condition and rendering what you want.

@if(item.Selected)

{ 

  @Html.CheckBoxFor(modelItem => item.Selected)

}

else

{

    @Html.CheckBoxFor(modelItem => item.Selected, new { @disabled = "disabled"})

}

You may consider writing a custom html helper which renders the proper markup for this.

answered Jan 6 '14 at 0:03

Shyju

146k87331441

2

For HTML5 I write new { @disabled = "" } as <input type="checkbox" disabled /> is valid and used by W3C in their samples.

– ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Feb 28 '17 at 15:56

stackoverflow.com/a/38366971/4594225

– Ali
Jul 14 '18 at 15:12

add a comment |

It is not easy to achieve this with an if condition inside the helper method because all the below markups will render a disabled chechbox.

<input type="checkbox" disabled>

<input type="checkbox" disabled="disabled">

<input type="checkbox" disabled="false">

<input type="checkbox" disabled="no">

<input type="checkbox" disabled="enabled">

This should work in the razor. Simple If condition and rendering what you want.

@if(item.Selected)

{ 

  @Html.CheckBoxFor(modelItem => item.Selected)

}

else

{

    @Html.CheckBoxFor(modelItem => item.Selected, new { @disabled = "disabled"})

}

You may consider writing a custom html helper which renders the proper markup for this.

answered Jan 6 '14 at 0:03

Shyju

146k87331441

2

For HTML5 I write new { @disabled = "" } as <input type="checkbox" disabled /> is valid and used by W3C in their samples.

– ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Feb 28 '17 at 15:56

stackoverflow.com/a/38366971/4594225

– Ali
Jul 14 '18 at 15:12

add a comment |

It is not easy to achieve this with an if condition inside the helper method because all the below markups will render a disabled chechbox.

<input type="checkbox" disabled>

<input type="checkbox" disabled="disabled">

<input type="checkbox" disabled="false">

<input type="checkbox" disabled="no">

<input type="checkbox" disabled="enabled">

This should work in the razor. Simple If condition and rendering what you want.

@if(item.Selected)

{ 

  @Html.CheckBoxFor(modelItem => item.Selected)

}

else

{

    @Html.CheckBoxFor(modelItem => item.Selected, new { @disabled = "disabled"})

}

You may consider writing a custom html helper which renders the proper markup for this.

answered Jan 6 '14 at 0:03

Shyju

146k87331441

It is not easy to achieve this with an if condition inside the helper method because all the below markups will render a disabled chechbox.

<input type="checkbox" disabled>

<input type="checkbox" disabled="disabled">

<input type="checkbox" disabled="false">

<input type="checkbox" disabled="no">

<input type="checkbox" disabled="enabled">

This should work in the razor. Simple If condition and rendering what you want.

@if(item.Selected)

{ 

  @Html.CheckBoxFor(modelItem => item.Selected)

}

else

{

    @Html.CheckBoxFor(modelItem => item.Selected, new { @disabled = "disabled"})

}

You may consider writing a custom html helper which renders the proper markup for this.

answered Jan 6 '14 at 0:03

Shyju

146k87331441

answered Jan 6 '14 at 0:03

Shyju

146k87331441

answered Jan 6 '14 at 0:03

Shyju

146k87331441

answered Jan 6 '14 at 0:03

Shyju

146k87331441

2

For HTML5 I write new { @disabled = "" } as <input type="checkbox" disabled /> is valid and used by W3C in their samples.

– ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Feb 28 '17 at 15:56

stackoverflow.com/a/38366971/4594225

– Ali
Jul 14 '18 at 15:12

add a comment |

2

For HTML5 I write new { @disabled = "" } as <input type="checkbox" disabled /> is valid and used by W3C in their samples.

– ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Feb 28 '17 at 15:56

stackoverflow.com/a/38366971/4594225

– Ali
Jul 14 '18 at 15:12

For HTML5 I write new { @disabled = "" } as <input type="checkbox" disabled /> is valid and used by W3C in their samples.

– ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Feb 28 '17 at 15:56

stackoverflow.com/a/38366971/4594225

– Ali
Jul 14 '18 at 15:12

add a comment |

This won't work because <input disabled="anything" /> will result in a disabled control. You need to only have a @disabled property when it should be disabled.

Try something like this:

@Html.CheckBoxFor(modelItem => item.Selected, item.Selectable ?  (object)new {} :  (object)new { @disabled = "disabled" })

Note that you might need to cast to (object)

edited Nov 20 '18 at 23:21

ealfonso

3,01222239

answered Jan 6 '14 at 0:03

Daniel Little

11.9k95683

This is a much cleaner option than the selected answer. You do need to cast as object; in my case I had this working: @Html.EditorFor(p => item.Selected, new {htmlAttributes = item.Selectable ? (object)new { } : (object)new { @disabled = "disabled" }})

– Ian
Mar 4 '15 at 9:29

1

You might just be able to go new object() on the left side

– Daniel Little
Mar 4 '15 at 10:15

add a comment |

This won't work because <input disabled="anything" /> will result in a disabled control. You need to only have a @disabled property when it should be disabled.

Try something like this:

@Html.CheckBoxFor(modelItem => item.Selected, item.Selectable ?  (object)new {} :  (object)new { @disabled = "disabled" })

Note that you might need to cast to (object)

edited Nov 20 '18 at 23:21

ealfonso

3,01222239

answered Jan 6 '14 at 0:03

Daniel Little

11.9k95683

This is a much cleaner option than the selected answer. You do need to cast as object; in my case I had this working: @Html.EditorFor(p => item.Selected, new {htmlAttributes = item.Selectable ? (object)new { } : (object)new { @disabled = "disabled" }})

– Ian
Mar 4 '15 at 9:29

1

You might just be able to go new object() on the left side

– Daniel Little
Mar 4 '15 at 10:15

add a comment |

This won't work because <input disabled="anything" /> will result in a disabled control. You need to only have a @disabled property when it should be disabled.

Try something like this:

@Html.CheckBoxFor(modelItem => item.Selected, item.Selectable ?  (object)new {} :  (object)new { @disabled = "disabled" })

Note that you might need to cast to (object)

edited Nov 20 '18 at 23:21

ealfonso

3,01222239

answered Jan 6 '14 at 0:03

Daniel Little

11.9k95683

This won't work because <input disabled="anything" /> will result in a disabled control. You need to only have a @disabled property when it should be disabled.

Try something like this:

@Html.CheckBoxFor(modelItem => item.Selected, item.Selectable ?  (object)new {} :  (object)new { @disabled = "disabled" })

Note that you might need to cast to (object)

edited Nov 20 '18 at 23:21

ealfonso

3,01222239

answered Jan 6 '14 at 0:03

Daniel Little

11.9k95683

edited Nov 20 '18 at 23:21

ealfonso

3,01222239

edited Nov 20 '18 at 23:21

ealfonso

3,01222239

edited Nov 20 '18 at 23:21

ealfonso

3,01222239

answered Jan 6 '14 at 0:03

Daniel Little

11.9k95683

answered Jan 6 '14 at 0:03

Daniel Little

11.9k95683

answered Jan 6 '14 at 0:03

Daniel Little

11.9k95683

This is a much cleaner option than the selected answer. You do need to cast as object; in my case I had this working: @Html.EditorFor(p => item.Selected, new {htmlAttributes = item.Selectable ? (object)new { } : (object)new { @disabled = "disabled" }})

– Ian
Mar 4 '15 at 9:29

1

You might just be able to go new object() on the left side

– Daniel Little
Mar 4 '15 at 10:15

add a comment |

This is a much cleaner option than the selected answer. You do need to cast as object; in my case I had this working: @Html.EditorFor(p => item.Selected, new {htmlAttributes = item.Selectable ? (object)new { } : (object)new { @disabled = "disabled" }})

– Ian
Mar 4 '15 at 9:29

1

You might just be able to go new object() on the left side

– Daniel Little
Mar 4 '15 at 10:15

This is a much cleaner option than the selected answer. You do need to cast as object; in my case I had this working: @Html.EditorFor(p => item.Selected, new {htmlAttributes = item.Selectable ? (object)new { } : (object)new { @disabled = "disabled" }})

– Ian
Mar 4 '15 at 9:29

You might just be able to go new object() on the left side

– Daniel Little
Mar 4 '15 at 10:15

add a comment |

Sorry, my previous answer was wrong.

The input-element will be disabled as soon as it gets the attribute disabled. It doesn't matter if the value is true, false. In HTML you can't set disabled to false.

So you will have to set the disabled attribute only when the condition is valid.

something like:

object attributes = null;

if (!item.Selectable)

{

    attributes = new { disabled = "disabled"};

}

@Html.CheckBoxFor(modelItem => item.Selected, attributes)

edited Jan 6 '14 at 0:03

answered Jan 5 '14 at 23:58

Pbirkoff

3,90121518

I tried your recommendation. Everything comes back as disabled.

– Bill Greer
Jan 6 '14 at 0:02

1

you probably need @ prefixes

– ealfonso
Aug 4 '14 at 1:33

add a comment |

Sorry, my previous answer was wrong.

The input-element will be disabled as soon as it gets the attribute disabled. It doesn't matter if the value is true, false. In HTML you can't set disabled to false.

So you will have to set the disabled attribute only when the condition is valid.

something like:

object attributes = null;

if (!item.Selectable)

{

    attributes = new { disabled = "disabled"};

}

@Html.CheckBoxFor(modelItem => item.Selected, attributes)

edited Jan 6 '14 at 0:03

answered Jan 5 '14 at 23:58

Pbirkoff

3,90121518

I tried your recommendation. Everything comes back as disabled.

– Bill Greer
Jan 6 '14 at 0:02

1

you probably need @ prefixes

– ealfonso
Aug 4 '14 at 1:33

add a comment |

Sorry, my previous answer was wrong.

The input-element will be disabled as soon as it gets the attribute disabled. It doesn't matter if the value is true, false. In HTML you can't set disabled to false.

So you will have to set the disabled attribute only when the condition is valid.

something like:

object attributes = null;

if (!item.Selectable)

{

    attributes = new { disabled = "disabled"};

}

@Html.CheckBoxFor(modelItem => item.Selected, attributes)

edited Jan 6 '14 at 0:03

answered Jan 5 '14 at 23:58

Pbirkoff

3,90121518

Sorry, my previous answer was wrong.

The input-element will be disabled as soon as it gets the attribute disabled. It doesn't matter if the value is true, false. In HTML you can't set disabled to false.

So you will have to set the disabled attribute only when the condition is valid.

something like:

object attributes = null;

if (!item.Selectable)

{

    attributes = new { disabled = "disabled"};

}

@Html.CheckBoxFor(modelItem => item.Selected, attributes)

edited Jan 6 '14 at 0:03

answered Jan 5 '14 at 23:58

Pbirkoff

3,90121518

edited Jan 6 '14 at 0:03

answered Jan 5 '14 at 23:58

Pbirkoff

3,90121518

answered Jan 5 '14 at 23:58

Pbirkoff

3,90121518

answered Jan 5 '14 at 23:58

Pbirkoff

3,90121518

I tried your recommendation. Everything comes back as disabled.

– Bill Greer
Jan 6 '14 at 0:02

1

you probably need @ prefixes

– ealfonso
Aug 4 '14 at 1:33

add a comment |

I tried your recommendation. Everything comes back as disabled.

– Bill Greer
Jan 6 '14 at 0:02

1

you probably need @ prefixes

– ealfonso
Aug 4 '14 at 1:33

I tried your recommendation. Everything comes back as disabled.

– Bill Greer
Jan 6 '14 at 0:02

you probably need @ prefixes

– ealfonso
Aug 4 '14 at 1:33

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky