Hide column in SharePoint custom list based on values

There are certain requirements when creating a new item in the SharePoint custom list user has to hide certain columns based on other value. There are two different ways to achieve it:

1. Server side
2. Client side

In Server side, we need to write our WebPart and add the webpart to the new form of the list and close the default one. In this, you have full control of the controls and life cycle. But the pain lies in the deployment and maintaining the code. The advantage is that we have full control and the webpart and flexibility to achieve any kind of validations.

In Client side, it can be achieved using JavaScript, especially using the Jquery. I'm a big fan of JQuery and I'll be using the second option to achieve it in this blog.

1. Edit the new form and add CEWP to the form.
2. Change the chrome state to none, we don't want to see the webpart title. It's meant to be invisible to the end users.
3. In the HTML view of the CEWP, add the below code snippet.
4. Change the HideColumn function parameters based on your columns in the custom list.

That's it! Try to add a new item to the list, and based on the column values the other column will get hidden in the code. I have used check box and text field. Based on check box, I'm deciding here whether to show or hide the column.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
</script>  
<script type="text/javascript">
function HideColumn(targetColumn, hideColumn) {  
	var columnObj = $("input[Title='" + hideColumn + "']");
	$("input[Title='" + targetColumn + "']").bind('click',function() { 
		
        if($(this).is(':checked')) { 			      
			columnObj.closest("tr").hide();
         }
		 else {
			columnObj.closest("tr").show();
		 }
	});		 
   }
   
 $(document).ready(function() {
		HideColumn('YourCheckboxcolumn','columntobehidden');
    });
</script>

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)