title: Use checkbox inside Select Option
body: <p>The client has given me a design which has a Select Option menu containing a checkBox together with the item name as individual items in the list. So for this i google it and found following code. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// MultiSelectBox, Kendo Plugin
  // -----------------------------------------------------------
  (function ($) {
      var MultiSelectBox = window.kendo.ui.DropDownList.extend({
  
          init: function (element, options) {
              var me = this;
              // setup template to include a checkbox
              options.template = kendo.template(
                  kendo.format('&lt;input type="checkbox" name="{0}" value="#= {1} #" /&gt;&amp;nbsp;&lt;label for="{0}"&gt;#= {2} #&lt;/label&gt;',
                      element.id + "_option_" + options.dataValueField,
                      options.dataValueField,
                      options.dataTextField
                  )
              );
              // create drop down UI
              window.kendo.ui.DropDownList.fn.init.call(me, element, options);
              // setup change trigger when popup closes
              me.popup.bind('close', function () {
                  var values = me.ul.find(":checked")
                      .map(function () { return this.value; }).toArray();
                  // check for array inequality
                  if (values &lt; me.selectedIndexes || values &gt; me.selectedIndexes) {
                      me._setText();
                      me._setValues();
                      me.trigger('change', {});
                  }
              });
          },
  
          options: {
              name: "MultiSelectBox"
          },
  
          selectedIndexes: [],
  
          _accessor: function (vals, idx) { // for view model changes
              var me = this;
              if (vals === undefined) {
                  return me.selectedIndexes;
              }
          },
  
          value: function (vals) {
              var me = this;
              if (vals === undefined) { // for view model changes
                  return me._accessor();
              } else { // for loading from view model
                  var checkboxes = me.ul.find("input[type='checkbox']");
                  if (vals.length &gt; 0) {
                      // convert to array of strings
                      var valArray = $(vals.toJSON())
                          .map(function() { return this + ''; })
                          .toArray();
                      checkboxes.each(function () {
                          this.checked = $.inArray(this.value, valArray) !== -1;
                      });
                      me._setText();
                      me._setValues();
                  }
              }
          },
  
          _select: function(li) { }, // kills highlighting behavior
          _blur: function () { }, // kills popup-close-on-click behavior
  
          _setText: function () { // set text based on selections
              var me = this;
              var text = me.ul.find(":checked")
                  .map(function () { return $(this).siblings("label").text(); })
                  .toArray();
              me.text(text.toString().replace(/,/g, ', '));
          },
          _setValues: function () { // set selectedIndexes based on selection
              var me = this;
              var values = me.ul.find(":checked")
                  .map(function () { return this.value; })
                  .toArray();
              me.selectedIndexes = values;
          }
  
      });
  
      window.kendo.ui.plugin(MultiSelectBox);
  
  })(jQuery);
  // ===========================================================
  
  // view model
  // -----------------------------------------------------------
  var testVM = kendo.observable({
      testItems: [1,3],
      testItemSource: new kendo.data.DataSource({
          data: [
              { Id: 1, Name: "Test 1" },
              { Id: 2, Name: "Test 2" },
              { Id: 3, Name: "Test 3" },
              { Id: 4, Name: "Test 4" }
          ]
      }),
  });
  // ===========================================================
  
  $(document).ready(function () {
      kendo.bind($("#testView"), testVM);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="testView"&gt;
      &lt;input id="testItems" data-role="multiselectbox" data-text-field="Name" data-value-field="Id" data-bind="source: testItemSource, value: testItems" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want something like this. But not exactly this. I want to use select option in html because i am developing a php site. full link of code :- <a href="http://jsfiddle.net/bDvkQ/" rel="nofollow noreferrer">http://jsfiddle.net/bDvkQ/</a></p>