I'm going to have 5 sets of select dropdowns with the same details in all 10 menus. They're going to be in pairs and if in any of the pairs you choose one of the options, the other select box has the option disabled.
I've got the following
$(document).ready(function () {
$('select').change(function () {
$('select.fix1 option').attr('disabled', false);
$('select.fix1').each(function() {
var val = $(this).find('option:selected').val();
if (!val) return;
$('select.fix1 option').filter(function() {
return $(this).val() == val;
}).attr('disabled', 'disabled');
});
});
});
Which applies the rule perfectly to 2 dropdowns, but how can I apply it to the fix1, fix2, fix3, fix4 and fix5 pairings without repeating the code 5 times?
For jQuery selectors you can combine multiple selectors with comma ( like css-seletors ):
$(document).ready(function () {
$('select').change(function () {
$('select.fix1 option, select.fix2 option, select.fix3 option').attr('disabled', false);
$('select.fix1,select.fix2,select.fix3').each(function(key, el) {
var val = $(this).find('option:selected').val();
if (!val) return;
$(el).find('option').filter(function() {
return $(this).val() == val;
}).attr('disabled', 'disabled');
});
});
});
But it's better to have some commot class to right selector only once like
$(document).ready(function () {
$('select').change(function () {
$('select.commonClass option').attr('disabled', false);
$('select.commonClass').each(function(key, el) {
var val = $(this).find('option:selected').val();
if (!val) return;
$(el).find('option').filter(function() {
return $(this).val() == val;
}).attr('disabled', 'disabled');
});
});
});
Related
I have a Jquery with event keyup.
It select dropdownList(CityId) option, which text is liked/samme as a user write in inputbox(finpost).
The problem is that only work once.. I cant see whats wrong ?!
Help
$(document).ready(function () {
$('#finpost').keyup(function ()
{
$("#CityId > option").each(function ()
{
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1)
{
$(this).attr("selected", 'true');
return false;
}
});
});
});
This work only once because your list can have only one selected option per time, but in your script logic you are setting attribute selected to true every time you find a matching without re-initializing others options
I think you should be good to go if you try this
$(document).ready(function () {
$('#finpost').keyup(function ()
{
var matchingFound = false;
$("#CityId > option").each(function ()
{
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1 && !matchingFound)
{
$(this).attr("selected", 'true');
matchingFound = true;
}
else {
$(this).attr("selected", "false");
}
});
});
});
Now its working. The problem wass this linie:
$(this).attr('selected', true);..
I changed it to $(this).prop('selected', true);
and its work
$(document).ready(function () {
$('#finpost').keyup(function () {
$("#CityId > option").each(function () {
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1) {
$(this).prop('selected', true);
return false;
}
});
});
});
Trying to disable a form submit button unless a selection has been made from a number of radio button groups. Have got this far, cant see why not working, button stays disabled:
<script>
$(function () {
$('#button').attr('disabled', true);
var disable = true;
$('input:radio').click(function () {
$('input:radio').each(function () {
if ($(this).is(':checked'))
disable = false;
else
disable = true;
});
});
$('#button').prop('disabled', disable == true ? true : false);
});
</script>
You should probably change the property inside the handler, and the right handler for a radio button would be onchange
$(function () {
var button = $('#button').prop('disabled', true);
var radios = $('input[type="radio"]');
var arr = $.map(radios, function(el) {
return el.name;
});
var groups = $.grep(arr, function(v, k){
return $.inArray(v ,arr) === k;
}).length;
radios.on('change', function () {
button.prop('disabled', radios.filter(':checked').length < groups);
});
});
FIDDLE
Having trouble with 2 things. Both of these arguments are ONLY working for the first box area generated on page load. But any subsequent ones created after aren't affected by these options. What am I doing wrong, and how can I fix it?
//CHECK IF TYPE/PAGE(S) IS SELECTED OR NOT
$(".dropdown").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty").children('.placeholder').remove();
});
//CHECKS TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
var $onlyOne = $('.onlyOne');
$onlyOne.click(function () {
$onlyOne.filter(':checked').not(this).removeAttr('checked');
});
The entire code for my JS is:
$(function () {
var i = 1;
//ADD ROW
$('body').on('click', '.addPTbutton', function () {
var box = '<table class="manage-pt" id="' + i + '"><tr class="pt-entry"><td class="pt-toggle-group"><input class="pt-button togPTbutton" id="0" type="button" value="▾"><input class="pt-button addPTbutton" id="0" type="button" value="+"><input class="pt-button delPTbutton" id="' + i + '" type="button" value="-"></td><td class="pt-values"><div><input class="vendor grayout" placeholder="*Vendor Name" type="text"><select class="move-me-right-10 dropdown"><option value="0" class="placeholder" selected="selected">*Select Type</option><option value="analytics">Analytics</option><option value="chat">Chat</option><option value="remarketing">Remarketing</option><option value="other">HTML/CSS/JS</option></select><i class="icon-sort"></i><i class="icon-lock"></i></div><div><textarea class="ptCode" name="ptCode" placeholder="*Pixel Tag Code"></textarea></div><div class="page-select"><select class="dropdown"><option value="0" class="placeholder" selected="selected">*Select Page(s)</option><option value="AllPages">All Pages</option><option value="HomePage">HomePage</option><option value="VehicleDetailsPage">VehicleDetailsPage</option><option value="VehicleSearchResults">VehicleSearchResults</option><option value="ContactUsForm">ContactUsForm </option></select></div><div class="area-checkboxes"><p class="wheretosave">*Where?</p><input name="head" type="checkbox"><label for="head">Head</label><input name="body" type="checkbox"><label for="body">Body</label></div><hr/></td></tr></table>';
i++;
$("#p_scents").append(box);
return false;
});
//DELETE ROW
$('body').on('click', '.delPTbutton', function () {
var boxnum = $(".manage-pt").length;
if (boxnum <= '1') {
alert('Cannot Delete Last Remaining Row');
} else {
$(this).parents().eq(3).remove();
}
return false;
});
//TOGGLE BUTTON
$('body').on('click', '.togPTbutton', function () {
var hiddenarea = $(this).parent().next().children().next();
if ($(hiddenarea).is(':hidden')) {
//PT-VALUES OPENED
$(this).val('▾');
$(this).parent().next().children(0).children(0).attr('readonly', false);
//$(this).parent().next().children(0).children(1).prop('disabled', false);
} else {
//PT-VALUES HIDDEN
$(this).val('▸');
$(this).parent().next().children(0).children(0).attr('readonly', true);
//$(this).parent().next().children(0).children(1).prop('disabled', 'disabled');
}
//TOGGLE VISIBILITY OF HIDDEN AREA
hiddenarea.toggle();
});
//CHECK IF TYPE/PAGE(S) IS SELECTED OR NOT
$(".dropdown").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty").children('.placeholder').remove();
});
$(".dropdown").change();
//CHECKS FOR MORE THAN ONE 1 MANAGE-PT BEFORE ENABLES SORTABLE
$('body').on('mouseenter', '.icon-sort', function () {
if ($(".manage-pt").size() > 1) {
$('#p_scents').sortable({
disabled: false,
placeHolder: '.placeHolderHighlight',
handle: '.icon-sort',
});
} else $('#p_scents').sortable({
disabled: true,
});
});
//CHECKS TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
var $onlyOne = $('.onlyOne');
$onlyOne.click(function () {
$onlyOne.filter(':checked').not(this).removeAttr('checked');
});
//LOCK BUTTON ON/OFF LOCKS FORM
$('body').on('click', '.icon-lock', function () {
$(this).toggleClass('locked');
var lockedarea = $(this).parents(0).eq(2);
$(lockedarea).find('input[type=text],input[type=checkbox],textarea,select').prop('disabled', function (_, val) {
return !val;
});
});
});
I assume you're using AJAX. You should be handling event delegation differently for dynamically generated DOM elements.
Ideally, you shouldn't be using body or document. Try using the nearest parent selector which is present all the time(non AJAX).
//CHECK IF TYPE/PAGE(S) IS SELECTED OR NOT
$("body").on("change", ".dropdown", function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty").children('.placeholder').remove();
});
//CHECKS TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
$("body").on("click",'.onlyOne', function () {
$onlyOne.filter(':checked').not(this).removeAttr('checked');
});
I am using Javascript to allow users to check all items in a form. However it is checking items even if they are disabled. Is there a way to make this only work on check boxes that are enabled?
<script>
$(document).ready(function () {
$('#selectall').on('click', function () {
$('.lv').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll() {
// if all check box are selected, check the selectall checkbox
// and vice versa
if ($(".lv").length == $(".lv:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
if ($(".lv:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
</script>
You can combine the :not() and :disabled selectors:
$(".lv:not(:disabled)").prop("checked", isChecked("selectall"));
I am designing a html page.
I want to show a confirmation msg on changing a drop down element using jquery or javascript.
Please help to do this.
I have code which will ask confirmation. On selecting cancel it will not select previous item of Drop down.
$("#dropdownId").change(function(e)
{
if($(this).val() == "40")
{
if(confirm("Are you sure"))
return true;
else
return false;
}
});
Thanks
You should be able to store the previous value on the click event and set it back on the change event:
var setLastSelected = function(element) {
$(element).data('lastSelected', $(element).find("option:selected"));
};
$("select").each(function () {
setLastSelected(this);
});
$("select").change(function(){
if(confirm("Are you sure")) {
setLastSelected(this);
return true;
}
else {
$(this).data('lastSelected').attr("selected", true);
return false;
}
});
See: http://jsfiddle.net/w9JYX/14/
Update: I updated the code to work more generically on a set of dropdown controls and also removed the click handler.
Here's a bit tighter solution along the same lines without having to create global variables or other functions:
$('#dropdownId')
.on('focus', function () {
$(this).data("prev", $(this).val());
})
.change(function () {
if (confirm('Are you sure?')) {
//normal case where the dropdown changes
$(this).data("prev", $(this).val());
} else {
//if the user doesn't confirm reset the dropdown back to what it was
$(this).val($(this).data("prev"));
}
});
var previous_option = $('#dropdownId option:selected');
$("#dropdownId").change(function(e){
var $this = $(this),
selected = $this.find('option:selected');
if($this.val() == "40"){
if(confirm("Are you sure")){
previous_option = selected;
return true;
} else{
selected.removeAttr('selected');
previous_option.attr('selected', 'selected');
}
} else{
previous_option = selected;
}
});
Usage for ASP.NET page:
$("#<%= dropdownId.ClientID %>")
.on('focus', function () {
$(this).data("prev", $(this).val());
})
.change(function () {
if (confirm('Are you sure?')) {
$(this).data("prev", $(this).val());
} else {
$(this).val($(this).data("prev"));
}
});