We Keep Coding

Switchery as radio button, cannot toggle back

Now making playlist using switchery checkbox,
and already make it like a radio button,
but it cant toggle back.
How can i make Switchery back to idle state / unchecked state ??
>>> my Fiddle Demo <<<
Here is my js :
$(document).ready(function() {
//switchery
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html,{size: 'small',});
});
//detect change
$('input.pinmusic').on('change', function() { //detect change
// auto uncheck when selecting other checkbox
// but this is not working with switchery
$('.pinmusic').not(this).prop('checked', false);
});
});
PS : its already checked, but only switchery get stuck.
already browse some topic of switchery here but still error.

I'm late but, here's my solution:
var $switches = [];
var elems = Array.prototype.slice.call();
$.each(document.querySelectorAll('.js-switch'),function(i,html) {
$switches[html.name] = new Switchery(html,{size: 'small',});
});
$('input.js-switch').on('change', function () {
if (this.checked) {
$.each(document.querySelectorAll('input.js-switch:not([name="' + this.name + '"])'),
function (i, e) {
switcherySetChecked($switchers[e.name], false)
});
}
});
function switcherySetChecked(switcher, check) {
var curr = $(switcher.element).prop('checked');
var disabled = $(switcher.element).prop('disabled');
if (disabled) {
switcher.enable();
}
if (check) {
if (curr) {
$(switcher.element).prop('checked',false);
}
$(switcher.element).trigger('click');
} else {
if (!curr) {
$(switcher.element).prop('checked', true);
}
$(switcher.element).trigger('click');
}
if (disabled) {
switcher.disable();
}
}

It's pretty difficult to be sure of your problem, but if I understand well, you want to uncheck a radio button.
Well, you can't. A radio button is not made to be unchecked. The meaning of a pool of radio buttons is "choose exactly one of the following options". Unchecking a radio button would mean that the user chooses zero option, which is not allowed.
From Wikipedia's Radio button:
A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of options.
It is possible that initially none of the radio buttons in a group are selected. This unselected state cannot be restored by interacting with the radio button widget, though it may be possible through other user interface elements.
What you need to use if you want to be able to choose zero option, is a Checkbox.

how to disable select view in angular?

I want to disable the ui multiple select view whenever I select particaular value in my example "Nicole" .If I select "Nicole" it disable the ui select then user not able to select other option.
can we remove previous selected option when user select "Nicole" .? I want only if user select "Nicole" it disable the select view and remove other selected option .
plunker
http://plnkr.co/edit/eVXVzlRXJ4KUZaNjID6P?p=preview
$scope.OnClickSelect = function(item) {
$scope.multipleDemo.push(item.age)
}
$scope.OnRemoveSelect = function(item) {
var index = $scope.multipleDemo.indexOf(item.age);
$scope.multipleDemo.splice(index, 1);
}

I forked your plunker here.
index.html
I changed
ng-disabled="disable"
to
ng-disabled="isDisabled()"
demo.js
$scope.disabled = false;
$scope.OnClickSelect = function(item) {
if (item.name === 'Nicole') {
// Check to make sure there is a previous user to remove
if ($scope.multipleDemo.length > 0) {
$scope.multipleDemo.pop();
}
// Disable user picker
$scope.disabled = true;
}
$scope.multipleDemo.push(item.age);
}
$scope.isDisabled = function() {
return $scope.disabled;
}
Currently, when you select "Nicole" it disables the ui select picker and it removes the previously added user from the list multipleDemo. For some reason, it's removing the previously added user from multipleDemo list but it's not removing it from the UI. The digest cycle is not updating properly. Might it worth it to try it in your project to see if it gets updated properly there.
Hope this helps!

Modified OnClickSelect function call to OnClickSelect($item, $select) and added disabled in scope. $select variable will hepl us to manipulate the selected data.
use on-select="OnClickSelect($item, $select)" and ng-disabled="disabled" in ui-select tag.
$scope.disabled = false;
$scope.restrictNames = ["Nicole", "Michael"];
$scope.OnClickSelect=function(item, $select)
{
if($scope.restrictNames.indexOf(item.name) != -1){
$select.selected = [];
$scope.multipleDemo = [];
$scope.disabled = true;
}
$scope.multipleDemo.push(item.age);
}

Getting default value of radio button upon page load using jQuery

I have two radio buttons whom I set to default (first selected value radio button is the default one upon load) like following:
var listing_type;
var shipping_location;
$(":radio[name='type'][value='1']").attr('checked', 'checked');
$(":radio[name='shipping'][value='1']").attr('checked', 'checked');
When the user clicks on some of the values from radio buttons, the values are caught like following:
$('input:radio[name=type]').click(function () {
listing_type = $(this).val();
});
$('input:radio[name=shipping]').click(function () {
shipping_location = $(this).val();
});
This 2nd part of the code works just fine, when the user clicks on some of the radio buttons, values are passed into my MVC Action just correctly.
However, I'm unable to catch the value if the user doesn't clicks anything on the radio buttons (i.e. leaves them as default as they are upon page load) and clicks "Search" Button...
The values in my MVC Action are always null for some reason, even though they aren't supposed to be. Here is how I'm passing the values and the here is the C# code from the Action:
$.post("/Search/Index", { keywords: $('.txtSearch').val(), type: /* listing_type */ <=> $('input[name=type]:checked').val(), location: $('input[name=shipping]:checked').val() <=> /*shipping_location*/ }, StartLoading())
.done(function (data) {
StopLoading();
var brands = $('<table />').append(data).find('#tableProducts').html();
$('#tableProducts').html(brands);
$('#tableProducts thead').show();
});
}
And this is the Action:
public ActionResult Index(string keywords, string type, string location)
{
// If the user doesn't interacts with the radio buttons and just enters the search term (ie. keywords) the type and location variables are null).
if ((keywords != null && keywords != "") && (type != null && type != "") && (location != null && location!=""))
{
// do something here....
}
return View();
}
So now my question is:
How can I pass the default values from the radio buttons if the user doesn't interacts with them (i.e. passing the default values I've set upon page load)???

Give this a try:
$('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);
$('input:radio[name="shipping"]').filter('[value="1"]').attr('checked', true);

Dropdown doesn't shows selected value in Chrome when click on back button

My webpage contains a drop-down and I have implemented history.js but on back button, the value of selected item in drop-down is not displayed. It loads items of drop-down with selected value but only not showing in drop-down as a selected item. Also by clicking on back button ajax call is made and that doesn't refresh drop-down. It means that drop-down is not including in ajaxcall, it is out of ajax-call.
This issue raise only in Chrome. My Chrome version is Version 47.0.2526.73 m. This works well in Mozilla Firefox.
The issue is when I click back button in Chrome, dropdown doesn't display default/selected value. It loads all values,too. Only not showing selected value on dropdown. if I remove "selected" property and again add this property by edit Html then it shows dropdown value also.
Here is I have implemented Histroy.js:
$(function () {
History.Adapter.bind(window, "statechange", function () {
var State = History.getState();
var url = ((State.data.loadUrl == "undefined") ? State.data.loadUrl : State.url);
if (typeof (manualStateChange) !== "undefined" && manualStateChange == true) {
AjaxCall(url);
}
else if (typeof (State.data.loadUrl) == "undefined") {
AjaxCall(url);
}
manualStateChange = true;
return false;
});
});
And here is my pushState function:
function PushStateUrl(stateUrl) {
manualStateChange = false;
History.pushState({ loadUrl: stateUrl, rand: Math.random() }, document.title, stateUrl);
}

Reset Select box when clicking on any other select boxes in jQuery

I read a few threads and they show these two codes can reset a select box.
$('#select2').change(function(){
$('#select1').prop('selectedIndex',0);
});
$('#select1').change(function(){
$('#select2').prop('selectedIndex',0);
});
Or
$(this).val("");
But I can't get a select box (fiddle) to reset to "Select" when clicking on any of the other select boxes. The code have the select boxes load content via data-file and redirect to other pages using value. Since I'm going to have more than 10 select boxes on a page, so perhaps using class would be better. I have tried the above methods but I either got error or the boxes always stay the "Select" option. Can anyone suggest some solutions?
Code:
var area = $(".selectboxarea");
$(".searchselectbox").on('change', function () {
area.empty();
var $this = $(this);
var selected = $this.find('option:selected');
var loadfile = selected.data('file');
if (loadfile) {
$this.next('.selectboxarea').html(loadfile);
$this.find('.select').text('Hide');
$this.find('.select').toggleClass('hide');
} else if (selected.hasClass('hide')) {
selected.text('Select');
selected.toggleClass('hide');
} else {
var url = $this.val();
if (url != '') {
window.location.href = url
}
return false;
}
});

$(".searchselectbox").not(this).prop('selectedIndex',0);
$('.select').text('Select');
JSFIDDLE