I have been trying to get this code working for multi select option sets for dynamic crm. My problem here is that this code works effortlessly in Chrome, does exactly what I want it to but in IE the .click event returns false no matter what, if the check boxes are checked or unchecked.
All this code does is take a option set and converts it to a multi select list and sets value into the two fields "l1s_trainingmodulesvalues" holds the value of the option selected and "l1s_trainingmodules" holds the label of the option selected.
Can some one have a look at what I have been doing wrong.
<html><head>
<title></title>
<script src="../WebResources/new_jquery3.1.1.min.js" type="text/javascript"></script>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script type="text/javascript">
// function will be called when web resource is loaded on Form.
$(document).ready(function ()
{
ConvertDropDownToCheckBoxList();
});
//Coverts option list to checkbox list.
function ConvertDropDownToCheckBoxList()
{
var dropdownOptions = parent.Xrm.Page.getAttribute("l1s_trainingmodulesoptionset").getOptions();
var selectedValue = parent.Xrm.Page.getAttribute("l1s_trainingmodulesvalues").getValue();
$(dropdownOptions).each(function (i, e)
{
var rText = $(this)[0].text;
var rvalue = $(this)[0].value;
var isChecked = false;
if (rText != '')
{
if (selectedValue != null && selectedValue.indexOf(rvalue) != -1)
isChecked = true;
var checkbox = "<label><input type=\"checkbox\" name =\"r\">" + rText + "<br></label>"
$(checkbox)
.attr("value", rvalue)
.attr("checked", isChecked)
.attr("id", "id" + rvalue)
.on('click',function ()
{
//To Set Picklist Select Values
var selectedOption = parent.Xrm.Page.getAttribute("l1s_trainingmodulesvalues").getValue();
alert($(this).is(':checked')); /*** This value always returns false in IE but in Chrome it works perfectly*/**
if ($(this).is(':checked'))
{
if (selectedOption == null)
selectedOption = rvalue+"";
else
selectedOption = selectedOption + "," + rvalue
}
else
{
var tempSelected = rvalue + ",";
if (selectedOption != null)
{
if (selectedOption.indexOf(tempSelected) != -1)
selectedOption = selectedOption.replace(tempSelected, "");
else
selectedOption = selectedOption.replace(rvalue, "")
}
}
//alert(rvalue);
parent.Xrm.Page.getAttribute("l1s_trainingmodulesvalues").setValue(selectedOption);
//To Set Picklist Select Text
var selectedYear = parent.Xrm.Page.getAttribute("l1s_trainingmodules").getValue();
if ($(this).is(':checked'))
{
if (selectedYear == null)
selectedYear = rText+"";
else
selectedYear = selectedYear + "," + rText
}
else
{
var tempSelectedtext = rText + ",";
if (selectedYear != null)
{
if (selectedYear.indexOf(tempSelectedtext) != -1)
selectedYear = selectedYear.replace(tempSelectedtext, "");
else
selectedYear = selectedYear.replace(rText, "");
}
}
//alert(selectedYear);
parent.Xrm.Page.getAttribute("l1s_trainingmodules").setValue(selectedYear);
})
.appendTo(checkboxList);
}
});
}
</script>
<meta charset="utf-8">
</head><body style="-ms-word-wrap: break-word;"><form><div id="checkboxList">
</div></form>
</body></html>Your checkbox variable does not refer to a checkbox element. It's a label (var checkbox = "<label><input type=\"checkbox\" name =\"r\">" + rText + "<br></label>"), which does not have a checked state.
Inside your click handler, change
if ($(this).is(':checked'))
to
if ($(this).find('input').is(':checked'))