Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get materialize CSS checkbox to work with @Html.CheckBoxFor?
When using Materialize CSS with ASP.NET MVC's Html.CheckBoxFor helper, you may encounter issues where checkboxes disappear or don't display properly. This happens because Html.CheckBoxFor generates both a visible checkbox and a hidden input field, which can interfere with Materialize CSS styling.
The Problem
The Html.CheckBoxFor helper in ASP.NET MVC automatically creates two input elements −
A visible checkbox input
A hidden input with the same name to ensure a value is always submitted
This hidden input can cause Materialize CSS checkbox styling to break, making checkboxes appear misaligned or disappear entirely.
Solution Using jQuery
The most effective solution is to move the hidden input elements to the bottom of their parent containers using jQuery. This prevents interference with Materialize CSS styling while maintaining the functionality of Html.CheckBoxFor.
JavaScript Implementation
<!DOCTYPE html>
<html>
<head>
<title>Materialize CSS Checkbox Fix</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Materialize CSS Checkbox Example</h2>
<div class="checkbox-container">
<input type="hidden" name="IsActive" value="false">
<input type="checkbox" id="IsActive" name="IsActive" value="true">
<label for="IsActive">Is Active</label>
</div>
<div class="checkbox-container">
<input type="hidden" name="IsEnabled" value="false">
<input type="checkbox" id="IsEnabled" name="IsEnabled" value="true" checked>
<label for="IsEnabled">Is Enabled</label>
</div>
<script>
$(document).ready(function() {
// Move hidden inputs to bottom of parent elements
$("input[type='hidden']").each(function() {
$(this).appendTo($(this).parent());
});
});
</script>
</body>
</html>
The script moves each hidden input to the bottom of its parent container, ensuring proper Materialize CSS styling.
Razor View Implementation
In your ASP.NET MVC Razor view, use the following approach −
<div class="input-field">
@Html.CheckBoxFor(model => model.IsActive, new { @id = "IsActive" })
<label for="IsActive">Is Active</label>
</div>
<script>
$(document).ready(function() {
$("input[type='hidden']").each(function() {
$(this).appendTo($(this).parent());
});
});
</script>
Alternative Solution Using CSS
You can also fix the issue using CSS to hide the problematic hidden inputs −
<!DOCTYPE html>
<html>
<head>
<title>CSS Solution for Materialize Checkboxes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
/* Hide hidden inputs generated by Html.CheckBoxFor */
input[type="checkbox"] + input[type="hidden"] {
display: none !important;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>CSS Fixed Checkboxes</h2>
<div>
<input type="checkbox" id="option1">
<input type="hidden" name="option1" value="false">
<label for="option1">Option 1</label>
</div>
<div>
<input type="checkbox" id="option2" checked>
<input type="hidden" name="option2" value="false">
<label for="option2">Option 2</label>
</div>
</body>
</html>
Complete Working Example
Following example demonstrates a complete implementation with multiple checkboxes −
<!DOCTYPE html>
<html>
<head>
<title>Complete Materialize Checkbox Solution</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="container">
<h2>User Preferences</h2>
<form>
<p>
<input type="hidden" name="EmailNotifications" value="false">
<input type="checkbox" id="EmailNotifications" name="EmailNotifications" value="true">
<label for="EmailNotifications">Email Notifications</label>
</p>
<p>
<input type="hidden" name="SMSAlerts" value="false">
<input type="checkbox" id="SMSAlerts" name="SMSAlerts" value="true" checked>
<label for="SMSAlerts">SMS Alerts</label>
</p>
<p>
<input type="hidden" name="NewsletterSubscription" value="false">
<input type="checkbox" id="NewsletterSubscription" name="NewsletterSubscription" value="true">
<label for="NewsletterSubscription">Newsletter Subscription</label>
</p>
<button type="submit" class="btn waves-effect waves-light">Save Preferences</button>
</form>
</div>
<script>
$(document).ready(function() {
// Fix Materialize CSS checkbox compatibility with Html.CheckBoxFor
$("input[type='hidden']").each(function() {
$(this).appendTo($(this).parent());
});
});
</script>
</body>
</html>
The checkboxes now display correctly with proper Materialize CSS styling, and the form submission still works as expected with ASP.NET MVC model binding.
How It Works
The jQuery solution works by −
Selecting all hidden input elements on the page
Moving each hidden input to the bottom of its parent container using
appendTo()This repositioning prevents the hidden input from interfering with Materialize CSS checkbox styling
The hidden input remains functional for form submission and model binding
Conclusion
To fix Materialize CSS checkbox compatibility issues with Html.CheckBoxFor, use jQuery to move hidden input elements to the bottom of their parent containers. This preserves both the visual styling of Materialize CSS and the functionality of ASP.NET MVC's checkbox helper method.
255 Views
