From 0716afbe4a7c20b2ae1c8361e1727af1619f33d8 Mon Sep 17 00:00:00 2001
From: Amanpreet Singh <apsdehal@gmail.com>
Date: Thu, 29 Sep 2016 04:01:06 -0400
Subject: [PATCH] Select: Show missing checkbox in multiple select

Fixes #8507
Closes #8525
---
 css/themes/default/jquery.mobile.theme.css | 11 ++++++++-
 js/widgets/forms/select.custom.js          | 27 ++++++++++++++--------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css
index 89aebb89ccc..4bc5159e25b 100644
--- a/css/themes/default/jquery.mobile.theme.css
+++ b/css/themes/default/jquery.mobile.theme.css
@@ -179,11 +179,18 @@ html .ui-alt-icon .ui-radio-off .ui-icon {
 	opacity: .3;
 }
 
-.ui-checkboxradio-label:not(.ui-checkboxradio-radio-label) .ui-checkboxradio-icon {
+.ui-checkboxradio-label:not(.ui-checkboxradio-radio-label) .ui-checkboxradio-icon,
+.ui-listview-item .ui-checkboxradio-icon {
 	-webkit-border-radius: .1875em;
 	border-radius: .1875em;
 }
 
+.ui-listview-item .ui-checkboxradio-icon {
+	position: absolute;
+	right: .5625em;
+	top: 30%;
+}
+
 .ui-checkboxradio-checked .ui-checkboxradio-icon {
 	filter: none;
 	opacity: 1;
@@ -337,6 +344,7 @@ html body .ui-group-theme-a .ui-button.ui-button-active,
 html head + body .ui-button.ui-button-a.ui-button-active,
 /* Active checkboxradio */
 .ui-page-theme-a .ui-checkboxradio-checked .ui-icon,
+.ui-page-theme-a .ui-listview-item .ui-checkboxradio-icon.ui-state-checked,
 html .ui-bar-a .ui-checkboxradio-checked .ui-icon,
 html .ui-body-a .ui-checkboxradio-checked .ui-icon,
 html body .ui-group-theme-a .ui-checkboxradio-checked .ui-icon,
@@ -516,6 +524,7 @@ html body .ui-group-theme-b .ui-button.ui-button-active,
 html head + body .ui-button.ui-button-b.ui-button-active,
 /* Active checkboxradio */
 .ui-page-theme-b .ui-checkboxradio-checked .ui-icon,
+.ui-page-theme-b .ui-listview-item .ui-checkboxradio-icon.ui-state-checked,
 html .ui-bar-b .ui-checkboxradio-checked .ui-icon,
 html .ui-body-b .ui-checkboxradio-checked .ui-icon,
 html body .ui-group-theme-b .ui-checkboxradio-checked .ui-icon,
diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 3e570d9be2e..7bac449e7a8 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -195,9 +195,9 @@ return $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 
 		// Toggle checkbox class for multiple selects
 		if ( this.isMultiple ) {
-			anchors = listItem.find( "a" );
-			this._toggleClass( anchors, null, "ui-checkbox-on", option.selected );
-			this._toggleClass( anchors, null, "ui-checkbox-off", !option.selected );
+			anchors = listItem.find( "a .ui-checkboxradio-icon" );
+			this._toggleClass( anchors, null, "ui-icon-check ui-state-checked", option.selected );
+			this._toggleClass( anchors, null, "ui-icon-blank", !option.selected );
 		}
 
 		// If it's not a multiple select, trigger change after it has finished closing
@@ -403,9 +403,9 @@ return $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 
 				// Multiple selects: add the "on" checkbox state to the icon
 				if ( this.isMultiple ) {
-					anchors = item.find( "a" );
-					this._removeClass( anchors, null, "ui-checkbox-off" );
-					this._addClass( anchors, null, "ui-checkbox-on" );
+					anchors = item.find( "a .ui-checkboxradio-icon" );
+					this._removeClass( anchors, null, "ui-icon-blank" );
+					this._addClass( anchors, null, "ui-icon-check ui-state-checked" );
 				} else {
 					if ( item.hasClass( "ui-screen-hidden" ) ) {
 						this._addClass( item.next().find( "a" ), null, "ui-button-active" );
@@ -414,9 +414,9 @@ return $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 					}
 				}
 			} else if ( this.isMultiple ) {
-				anchors = item.find( "a" );
-				this._removeClass( anchors, null, "ui-checkbox-on" );
-				this._addClass( anchors, null, "ui-checkbox-off" );
+				anchors = item.find( "a .ui-checkboxradio-icon" );
+				this._removeClass( anchors, null, "ui-icon-check ui-state-checked" );
+				this._addClass( anchors, null, "ui-icon-blank" );
 			}
 		}, this ) );
 	},
@@ -659,7 +659,14 @@ return $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 			item.setAttribute( "role", "option" );
 			anchor.setAttribute( "tabindex", "-1" );
 			if ( this.isMultiple ) {
-				this._addClass( $( anchor ), null, "ui-button ui-checkbox-off ui-icon-end" );
+				this._addClass( $( anchor ), null, "ui-button ui-icon-end" );
+
+				var spanEl = $( "<span></span>", {
+					"class": "ui-checkboxradio-icon ui-corner-all" +
+					" ui-icon ui-icon-blank ui-icon-background"
+				} );
+
+				$( anchor ).append( spanEl );
 			}
 
 			item.appendChild( anchor );