Switchery as radio button, cannot toggle back - javascript

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.

Related

in my form I checked input radio and image changes, but I fill input text and the image changes back

Okey, here goes my big problem:
I have this form, which has a submit button that only enables when you have checked and filled both inputs (there is no problem with that). If you follow these steps, you will realize where my problem is:
Load this jsfiddle https://jsfiddle.net/ozLmdx4o/ don't pay to much attention to the code now, just look at the form: there is a default profile image, an empty input text, an unchecked input radio, and a disabled submit button.
Test the form: fill the input text and check the input radio and observe how the default profile image changes to another image. Check and uncheck the input radio to observe how the image is linked to this input. This is the key of all this.
But, what if your input text was filled wrong? so delete whatever you entered in the input text and start over again... but...what? The image has returned to the default profile image! even if it was linked to the input radio! why???
Why this happens?
Now you can check the code, because there must be somewhere something I have missed. Can anybody help me to keep the image linked to the input radio button?
input radio button unchecked = default profile image.
input radio button checked = special image.
//INPUT RADIO ON & OFF CODE
var prv1;
var markIt1 = function(e) {
if (prv1 === this && this.checked) {
this.checked = false;
prv1 = null;
} else {
prv1 = this;
}
checkIfValid();
if (!e.target.checked) {
var img = document.getElementById('theimage');
img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}
};
//TURN ON AND OFF FUNCTIONS
$(function() {
$('input.whatever_class').on('click', markIt1);
$('input[type=text]').on('keyup', markIt1);
});
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
//CHANGE IMAGES
function changeImage(imgName) {
image = document.getElementById('theimage');
image.src = imgName;
}
function checkIfValid() {
var current = $('input[type=radio]:checked');
if ((current.length >= 1) && ($('input[type=text]').val() != "")) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
};
I would like the image to not change anytime I modify the input text.
Can anyone fix my code just the necessary to solve that problem?
Thanks!
Add this check:
if (!e.target.checked && !document.getElementById('whatever_id').checked) {
var img = document.getElementById('theimage');
img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}
It is running the check function on input text and not getting checked and hence the problem. Hope it helps.
PS: I have kept e.target.checked but if not required then you can remove it.
You're using markIt1() as an event handler for both the textbox and the radio button. The value of e.target.checked is misleading because e.target could be the textbox or the radio button. e.target.checked always returns false for the textbox. I would use a separate event handler for each.

Disable submit button until one in a group of dynamically-created radio buttons selected

I would like to disable a submit button until one of a group of radio buttons is selected. I know there are similar questions out there, but none pertain to a dynamically-created group of radio buttons...
Here is what I have.. a script at the top of the page generates a number of buttons given a user upload in a previous view:
var jScriptArray = new Array(#ViewBag.ColNames.Length);
var array = #Html.Raw(Json.Encode(ViewBag.ColNames));
for( var i = 0; i < #ViewBag.ColNames.Length; i++ ) {
jScriptArray[i] = array[i];
}
var length = #(ViewBag.NCols);
$(document).ready(function () {
for (var i = 0; i < length; i++) {
$('#radioGroupBy').append('<input id="grp' + i +'" type="radio" name="group" value="'+i+'">'+jScriptArray[i]+'</input>')
$('#radioGroupBy').append('<p style="padding:0px;margin:0px;"></br></p>');
}
});
This works, and selecting any of the buttons returns the proper value; great. However, I want to disable the submit button until one of these radio buttons is selected. Using an answer I found on SO earlier, I created the following (this works, but only if I hard code the group of buttons. The issue is it won't work with the Javascript-created group):
var $radioButtons = $("input[name='group']");
$radioButtons.change(function () {
var anyRadioButtonHasValue = false;
// iterate through all radio buttons
$radioButtons.each(function () {
if (this.checked) {
// indicate we found a radio button which has a value
anyRadioButtonHasValue = true;
// break out of each loop
return false;
}
});
// check if we found any radio button which has a value
if (anyRadioButtonHasValue) {
// enable submit button.
$("input[name='submitbtn']").removeAttr("disabled");
}
});
Also, for the sake of thoroughness, here is the submit button:
<input id="submitbtn" name="submitbtn" type="submit" value="Drill Down" disabled="disabled" />
Thanks so much!
Event delegation (also, use .prop() when removing the disabled property to the submit button)
$("#radioGroupBy").on("change", ":radio[name=group]", function() {
var $radioButtons = $(":radio[name=group]");
var anyRadioButtonHasValue = false;
// iterate through all radio buttons
$radioButtons.each(function () {
if (this.checked) {
// indicate we found a radio button which has a value
anyRadioButtonHasValue = true;
// break out of each loop
return false;
}
});
// check if we found any radio button which has a value
if (anyRadioButtonHasValue) {
$("input[name='submitbtn']").prop("disabled", false);
}
});
I figured it out. As Benjamin suggested in comments above, the latter script was executing before the DOM was ready. I solved it by just surrounding the whole script in $(window).load... :
$(window).load(function () {
var $radioButtons = $("input[name='group']");
$radioButtons.change(function () {
var anyRadioButtonHasValue = false;
// iterate through all radio buttons
$radioButtons.each(function () {
if (this.checked) {
// indicate we found a radio button which has a value
anyRadioButtonHasValue = true;
// break out of each loop
return false;
}
});
// check if we found any radio button which has a value
if (anyRadioButtonHasValue) {
// enable submit button.
$("input[name='submitbtn']").removeAttr("disabled");
}
});
});

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

Check previously clicked radio button

I have a form having multiple radio buttons in different groups. e.g
category vehicle has two radio buttons
2 wheeler
4 wheeler
same as other categories have 2-2 radio buttons.
What i want to do is when i check 4 wheeler from 2 wheeler i show a warning message pop up, are u sure to switch, if yes then ok, but for no i want to check again 2 wheeler radio button. I can not do this from id as well coz i have to do this on other fields as well.
<input type="radio"/>
Your questions is not very clear but from what I understand I guess you want:
$(document).ready(function(){
$('#submit_button').click(function() {
if (!$("input[#name='radioName']:checked").val()) {
alert('Nothing is checked!');
return false;
}
else {
alert('One of the radio buttons is checked!');
}
});
});
And add the same name tag for all your radio inputs:
<input type="radio" name="radioName"/>
This might be what you're trying to achieve:
var old_input = $('input[name="wheeler"]:checked');
$('input[name="wheeler"]').change(function(e) {
console.log(e);
if (
old_input.next().text() == '2 Wheeler' &&
$(this).next().text() == '4 Wheeler'
) {
if (confirm('Are you sure you want to change?')) {
old_input = $(this);
}
else {
this.checked = 0;
old_input.get()[0].checked = 1;
}
}
else {
old_input = $(this);
}
});
http://jsfiddle.net/pQpk7/
I think you are looking for this http://jsfiddle.net/7rF3d/ When a radio button is checked for the first time nothing happens. When someone checked another he is first prompted for a confirmation. If the user cancels the old checked radio will be restored.
var lastChecked;
$("input[type=radio]").click(function() {
if(typeof(lastChecked) != "undefined" && !confirm("are you sure?")) {
$("input[type=radio]:checked").attr("checked", "false");
$(lastChecked).prop("checked", true);
} else {
lastChecked = $('input[type=radio]:checked');
}
});
Since jQuery isn't tagged in the question, here's a pure JS approach. Guys, seriously, try to quit suggesting jQuery solutions when it isn't even tagged in the question.
You can achieve this by using the click event and returning false if there is at least one radio button checked, then the answer to a window.confirm is false, which will prevent it to select the new one as expected.
var oneChecked=false;
var elem=document.getElementsByName("wheeler");
for (var i=0;i<elem.length;i++) {
elem[i].onclick=function(e) {
if (oneChecked && !window.confirm("Are you sure to switch?")) {
return false;
} else {
oneChecked=true;
}
}
}
FIDDLE

How to uncheck a radio button by clicking on it a second time

I have been searching in a lot of topics but I haven't found anything that really correspond to my problem :
I want to make radio buttons uncheckable (i.e. uncheck a radio button by clicking on it when it's already checked).
I found some solutions using a hidden radio button as a temporary comparison object but this doesn't fits to my existing context, so I would like to do the same without another radio button.
I tried to simply test and change the status/value of the radio button on "onclick" event but it hasn't been very successfull...
Thanks in advance,
Clem.
That's not what radio buttons are. If you try to make this work, you will just confuse your users.
If you want something that can be checked and then unchecked, use a checkbox. Radio buttons are for selecting exactly one of some set of options.
better so:
onclick="
var isChecked = $(this).attr('is_che');
if (isChecked) {
$(this).removeAttr('checked');
$(this).removeAttr('is_che');
}
else {
$(this).attr('checked', 'checked');
$(this).attr('is_che', 'true');
}"
I know this sort of action is non-standard for radio buttons, but the poster requested the functionality. The following is code that I've used in the past. I've found it not to be the most optimized (assuming a large # of radio buttons), but I also haven't taken the time to do that optimization.
// Allow for radio button unchecking
$(function(){
var allRadios = $('input[type=radio]')
var radioChecked;
var setCurrent = function(e) {
var obj = e.target;
radioChecked = $(obj).attr('checked');
}
var setCheck = function(e) {
if (e.type == 'keypress' && e.charCode != 32) {
return false;
}
var obj = e.target;
if (radioChecked) {
$(obj).attr('checked', false);
} else {
$(obj).attr('checked', true);
}
}
$.each(allRadios, function(i, val) {
var label = $('label[for=' + $(this).attr("id") + ']');
$(this).bind('mousedown keydown', function(e){
setCurrent(e);
});
label.bind('mousedown keydown', function(e){
e.target = $('#' + $(this).attr("for"));
setCurrent(e);
});
$(this).bind('click', function(e){
setCheck(e);
});
});
});

Categories