We Keep Coding

Hide inactive or disabled elements in the list

I am struggling with the following issue.
On my wordpress website I have a dropdown filter lists
1. VEHICLE TYPE (convertible, coupe etc.)
2. MAKE (Mercedes, BMW etc.)
3. MODEL (CLK, X5 etc.)
so, when selecting the VEHICLE TYPE from the FIRST list,
appears the corresponding MAKES in the SECOND one for the selected item,
and in the THIRD list appears then the model coresponding the MAKE (Mercedes-CLK, BMW-X5).
Now the thing is, that the Makes or Models that are disabled or inactive won't show on DESKTOP but on MOBILE they appear although still inactive.
1ST question: How can I hide the disabled elements from the list on MOBILE?
2ND question: Can I disable the MAKES and MODELS unless chosen VEHICLE TYPE?
Here below you can see the backend code for the list.
var car_dealer = {};
(function ($) {
/*
* Cleans the form URL from empty parameters on submit
*/
$('.vehicle-search-form').submit( function() {
$(this).find( "input[type='number']" ).filter(function(){
return ($(this).attr( 'min' ) == $(this).attr( 'value' ) || $(this).attr( 'max' ) == $(this).attr( 'value' ));
}).attr( 'disabled', 'disabled' );
$(this).find( "input[type='search']" ).filter(function(){
return ! $(this).val();
}).attr( 'disabled', 'disabled' );
$(this).find( "select" ).filter(function(){
return ! ( $(this).val() && $(this).val() != '-1');
}).attr( 'disabled', 'disabled' );
})
/*
* Disables all models that do not fit the selected make
*/
$('#car_dealer_field_vehicle_type').on('change',function(){
var makeName = $(this).find( 'option:selected' ).attr( 'data-type' );
$('#car_dealer_field_make option')
// first, disable all options
.attr( 'disabled', 'disabled' )
// activate the corresponding models
.filter( '[data-type="' + $.trim( makeName ) + '"], [value="-1"]' ).removeAttr( 'disabled' )
// remove previous value
.parent().val( -1 );
});
$('#car_dealer_field_make').on('change',function(){
var makeName = $(this).find( 'option:selected' ).attr( 'data-make' );
$('#car_dealer_field_model option')
// first, disable all options
.attr( 'disabled', 'disabled' )
// activate the corresponding models
.filter( '[data-make="' + $.trim( makeName ) + '"], [value="-1"]' ).removeAttr( 'disabled' )
// remove previous value
.parent().val( -1 );
});
}(jQuery));
I am grateful and looking forward to hear from you soon !

I know this is old but here we go.
Here is the event handler - reworked a slight bit to only have one selection event handler.
Now as far as the hiding and showing, simply do that to the appropriate list of options filtered as you indicate to hide the disabled ones.
Use prop("disabled",true) to disable, not an attribute.
I left out how to re-enable and show when that is needed but that is a simple
.find('option').prop('disabled",false).show();
(function($) {
/* * Cleans the form URL from empty parameters on submit */
$('.vehicle-search-form').on('submit', function(e) {
// might want to prevent the submit?
e.preventDefault();
$(this).find("input[type='number']")
.filter(function() {
return ($(this).attr('min') == $(this).attr('value') ||
$(this).attr('max') == $(this).attr('value'));
}).prop('disabled', true);
$(this).find("input[type='search']")
.filter(function() {
return !$(this).val();
}).prop('disabled', true);
$(this).find("select").filter(function() {
return !($(this).val() && $(this).val() != '-1');
}).prop('disabled', true);
});
// here we can create one custom event handler to do the disable
$('#car_dealer_field_make')
.on('change', function() {
var makeName = $(this).find('option:selected').data('make');
$(this).trigger("custom-set-me", [makeName, "fun"]);
});
$('#car_dealer_field_vehicle_type')
.on('change', function() {
let makeName = $(this).find('option:selected').data('type');
$(this).trigger("custom-set-me", [makeName, "fun"]);
})
// add the other one to the handler
.add("#car_dealer_field_make")
/*
* Disables all that do not fit the selected
*/
.on('custom-set-me', function(event, compareTo, param2) {) {
let iamMe = $(this);
let options = iamMe.find('option');
options
.prop('disabled', true)
// activate the corresponding models
.filter(function() {
return $(this).data('type') == $.trim(compareTo);
}).val(-1).prop('disabled', false);
// remove previous value
iamMe.val(-1);
options.filter(':diabled').hide();
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

enable/disable datepicker with dropdown asp.net

i have dropdown for selecting data type of data in a textbox. dropdown options are like integer, decimal,string,date.
everything is working fine except one thing that is am unable to get a datepicker to the text box when dropdown is selected to date.
tried something like but failed to achieve
$(function () {
$(".date1").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 1
});
});
$("#<%=ddlDataType.ClientID %>").change(function () {
if ($('#<%=ddlDataType.ClientID %> option:selected').text().toLowerCase() == "date") {
$("#<%=txtDefaultValue.ClientID%>").prop("class", "date1");
}
else {
$("#<%=txtDefaultValue.ClientID%>").prop("class", "");
}
});
what is the possible way to achieve this.

If you want to remove it (keep it enable for other purpose) then you can use destroy method
$("#<%=txtDefaultValue.ClientID%>").datepicker("destroy");
else
You can set option enable and disable, on change event of ddlDataType drowndown list.
$("#<%=txtDefaultValue.ClientID%>").datepicker('enable');
$("#<%=txtDefaultValue.ClientID%>").datepicker('disable');
alternative you can also set options to enable disable datepicker
//To enable
$("#<%=txtDefaultValue.ClientID%>").datepicker( "option", "disabled", false );
//To disable
$("#<%=txtDefaultValue.ClientID%>").datepicker( "option", "disabled", true );

If you just want your datepicker to be shown or hidden, you can try this code (assuming you are using jQuery).
if ($('#<%=ddlDataType.ClientID %> option:selected').text().toLowerCase() == "date")
{
$(".date1").css("display", "block");
}
else {
$(".date1").css("display", "none");
}

Check input text value when page is loaded

I have a couple of register page in my project. Example is page to register student info, Enrolment Info,etc.
In the page I want to set button to disable when a criteria is met. This is my code
$(document).ready(function() {
if($('#student_id').val().length === 0){
$('#student_update').prop( "disabled", true );
$('#student_delete').prop( "disabled", true );
}else{
$('#student_add').prop( "disabled", true );
}
});
If the student id is empty meaning there is nothing to update or delete I want to disable else the add button is disabled.
The Student Id is ready only meaning the only way to put value into it is to select data from database.

if( !$('#student_id').val() )
as you do not need to check if the length is > 0
since an empty string evaluates to false in jquery.
for readability you can use :
if( $('#student_id').val().length === 0 )
You can use something like this:
$(document).ready(function() {
disableButton();
$('#student_id').keyup(function(){
disableButton();
});
});
function disableButton(){
if(!$('#student_id').val()){
$('#student_update').prop( "disabled", true );
$('#student_delete').prop( "disabled", true );
$('#student_add').prop( "disabled", false);
}else{
$('#student_add').prop( "disabled", true );
$('#student_update').prop( "disabled", false);
$('#student_delete').prop( "disabled", false);
}
}

Try this:
if($('#student_id').val()=="")
OR spell lenght correctly:
if($('#student_id').val().length==0)

Input (button) check and uncheck event (JQuery)

I need to do different things depending on whether a checkbox with an ID attribute is checked or unchecked by a mouse. An event needs to be fired when either a check or an uncheck is performed. I suppose one could use a single check event handler and just see what the check state is but I don't know how.

You can use the change event which will be fired when the checkbox state is changed, so register a change event handler using the id of the checkbox
//dom ready handler
jQuery(function ($) {
//change event handler
$('#myid').change(function () {
if (this.checked) {
//checked do something
$('span').text('checked');
} else {
//unchecked do something else
$('span').text('unchecked');
}
})
})
Demo: Fiddle
Document Ready
change event
change event handler
id selector
Probably you should start with
jQuery API
Learn jQuery

function check_preconf() {
if(document.getElementById("step1_full").checked) {
$( "#step2_half" ).prop( "disabled", true );
$( "#step3_half" ).prop( "disabled", true );
$( "#step4_half" ).prop( "disabled", true );
$( "#step5_half" ).prop( "disabled", true );
}
}

fadeOut() method won't work with event.preventdefault()

When my form is submitted and validated, I want my dialog to fadeout and close, I do not want the page to automatically refresh. If I use preventdefault the page doesn't refresh, but the dialog doesn't close either. What else do I need to do?
$("#form").validate({
rules: {
number : {
required: true
}
},
messages: {
number : {
required: "enter a phone number"
}
},
submitHandler: function(form,event) {
event.preventDefault();
//this prevents a double click on the form button
$("form :input:submit").click(function() {
this.disabled = 'disabled';
});
//Here I want the dialog to slowly fade, then close, *then* reload the page.
//but it won't fade or close when I'm using preventDefault().
$('#dialog').fadeOut('slow', function(){
$( this ).dialog( "close" );
location.reload();
});
} //closes submit handler
});//close validate

The problem is submitHandler receive only 1 argument form, therefore trying to call event.preventDefault(); will cause exception and stop the below script from executing.
The callback gets passed one argument:
form
Type: Element The form currently being validated, as a
DOMElement.
From documentation
Try return false; at the end of the function.
submitHandler: function(form) {
$("form :input:submit").click(function() {
this.disabled = 'disabled';
});
$('#dialog').fadeOut('slow', function(){
$( this ).dialog( "close" );
location.reload();
});
return false;
}

You could put event.preventDefault(); at the end of your submithandler function.