3

I am working with SharePoint online and in one of the lists, I am using a choice check box column called 'Vehicle Type' with following choices: Personal Vehicle, Company Vehicle.

I am looking to do a simple thing, when Personal vehicle is checked, then I would like to hide two currency columns: Car Rental, Fuel and if Company Vehicle is checked I want to show the above two columns. Can someone help me with the JS solution. Thanks in advance.

P.S: it should account for the change event.

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()

    $("input[title='Vehicle Driven']").change(function(){
        if($(this).is(":checked")=="Personal Vehicle"){
            $("nobr:contains('Fuel')").closest('tr').hide();
        }else{
            $("nobr:contains('Fuel')").closest('tr').show();
        }
    });

});
</script>
3

I create a test custom list and add new column 'Vehicle Type'(choice Checkbox field type) with following choices: Personal Vehicle, Company Vehicle. And two currency columns: Car Rental, Fuel.

Then add the following code into script editor web part in newform.aspx page.

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("nobr:contains('Car Rental')").closest('tr').hide();
    $("nobr:contains('Fuel')").closest('tr').hide();
    $("span[title='Personal Vehicle']>input").change(function(){
        if($(this).is(":checked")){
            $("nobr:contains('Car Rental')").closest('tr').hide();
            $("nobr:contains('Fuel')").closest('tr').hide();
        }    
    });
    $("span[title='Company Vehicle']>input").change(function(){
        if($(this).is(":checked")){
            $("nobr:contains('Car Rental')").closest('tr').show();
            $("nobr:contains('Fuel')").closest('tr').show();
        }else{
            $("nobr:contains('Car Rental')").closest('tr').hide();
            $("nobr:contains('Fuel')").closest('tr').hide();
        } 
    });
});
</script>

enter image description here

4

Instead, input, try to use select as the following

$("select[title='Vehicle Driven']").change(function()
{
  if ($("select[title='Vehicle Driven']").val() != "Personal Vehicle")
  {
   $("nobr:contains('Fuel')").closest('tr').hide();
  }
  else
  {
   $("nobr:contains('Fuel')").closest('tr').show(); 
  }
// your code
}

Note: In SharePoint Online, make sure that you have enabled the custom script

For more details check

1

If you want to get a field value with jQuery, you could do something like this (sample is for a text input field)

$("input[title='title_of_the_field']").val()

And hiding an input field would be something like:

$("input[title='title_of_the_field']").hide()

And to check if a checkbox is checked, you could use the following code:

if ($("input[title='title_of_the_field']").is(":checked"))
{
  // it is checked
}
  • I added piece of code I am using in the Question description but can't get it to work, can you please take a look and help me out. – mdevm Aug 23 '18 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.