Multiselected view in dropdownlist using MVC

Question

I am adding the checkbox in Dropdownlist for multiview..My code is below.

 

In view page:

<div class="col-md-10">
@Html.ListBoxFor(model => model.SkillArray, (IEnumerable<SelectListItem>)ViewBag.SkillList as SelectList,
new { style = "width:100%", @id = "Skill", multiple = "multiple", @class = "form-control", })
@Html.ValidationMessageFor(model => model.Skill, "", new { @class = "text-danger" })
</div>

In javascript:

<script type="text/javascript">
$(function () {
jQuery('#Rolelist').multiselect({
includeSelectAllOption: true
});
});
</script>

In HomeController:(for creating dropdownlist)

string constr = ConfigurationManager.ConnectionStrings["Databaseconnection"].ToString();
SqlConnection cons = new SqlConnection(constr);
SqlDataAdapter _daa = new SqlDataAdapter("Select * From Skill", constr);
DataTable _dt1 = new DataTable();
_daa.Fill(_dt1);
ViewBag.SkillList = ToSelectList(_dt1, "id", "Skill");
return View();

Then am using this Bootstrap links:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<!---->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!---dropdown checkbox-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<!---->

(Am using this above links for my project total design is affected..also the checkbox is not responding)

 

How to resolve this).