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)
Related
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>
I've been working recently on a way to disable the billing address in the checkout page of WooCommerce when states in not equal to 'Lima y Callao'
This is what i got for now
jQuery(document).ready(function($){
$('#billing_state').change(function (){
if($('#billing_state').val() == 'Lima y Callao'){
if($('#billing_address_1').prop( "disabled", true )){
$('#billing_address_1').prop( "disabled", false );
}
if($('#billing_address_2').prop( "disabled", true )){
$('#billing_address_2').prop( "disabled", false );
}
} else {
$('#billing_address_1').attr('disabled', 'disabled').val('');
$("#billing_address_2").attr('disabled', 'disabled').val('');
$(this).removeClass("validate-required");
$(this).removeClass("woocommerce-validated");
if(!$(this).hasClass("validate-required")) {
$(this).addClass("validate-required");
}
if(!$(this).hasClass("woocommerce-validated")) {
$(this).addClass("woocommerce-validated");
}
}
}).trigger('change');
});
However, it only disables the textfields but doesn't enable when the option Lima y Callao is selected.
What do you think? I am already looking for answers and I'm trying my best to find a solution on my own.
I need a UL, containing the search results (ul.job_listings) to hide after a reset button is pressed.
So far a reset has been set up to reset the search form:
$( '.job_filters' ).on( 'click', '.reset', function () {
var target = $( this ).closest( 'div.job_listings' );
var form = $( this ).closest( 'form' );
form.find( ':input[name="search_keywords"], :input[name="search_location"], .job-manager-filter' ).not(':input[type="hidden"]').val( '' ).trigger( 'chosen:updated' );
form.find( ':input[name^="search_categories"]' ).not(':input[type="hidden"]').val( 0 ).trigger( 'chosen:updated' );
$( ':input[name="filter_job_type[]"]', form ).not(':input[type="hidden"]').attr( 'checked', 'checked' );
target.triggerHandler( 'reset' );
target.triggerHandler( 'update_results', [ 1, false ] );
job_manager_store_state( target, 1 );
return false;
} );
How would I add to it to also hide the results div?
Thanks for any help,
Liz.
Since you seem to be using jQuery, it you could just add
target.hide();
before the return statement.
edit - see comments above :-)
I am wondering if there's a way to write the following code without the if / else.
Currently, this works fine. But I'm trying to figure out how I can leverage a DRY method and I don't like the fact that the prop is written twice.
I have a text value and the user needs to input that code into the text box. Once the values match, it "enables" the submit button, otherwise it disables it.
$( '#input-code' ).on( 'change keyup paste', function() {
if ( $( this ).val() == $( "#random-code" ).text() ) {
$( '#submit-btn' ).prop( 'disabled', false );
} else {
$( '#submit-btn' ).prop( 'disabled', true );
}
});
You can migrate the if..else into a internal condition to set the attribute,
$( '#input-code' ).on( 'change keyup paste', function() {
$( '#submit-btn' ).prop( 'disabled', this.value !== $( "#random-code" ).text() );
});
Additionally, if you are dealing with modern browsers, you can just use on('input' instead of 'change keyup paste'. Check for browser support though.
You can use the negated expression directly in prop.
This will disable the button when button text and the text inside #random-code will be same.
Make sure you trim the text(), to remove leading and trailing spaces, otherwise it will not match with the button text.
$('#input-code').on('change keyup paste', function() {
$('#submit-btn').prop('disabled', !($(this).val() == $.trim($("#random-code").text())));
});
OR
$('#input-code').on('change keyup paste', function() {
$('#submit-btn').prop('disabled', $(this).val() !== $.trim($("#random-code").text()));
// ^^^
});
$('#input-code').on('change keyup paste', function() {
$('#submit-btn').prop('disabled', function(){
return ( $( this ).val() == $( "#random-code" ).text() );
});
});
for more detail you can check here...
Jquery prop() detail.....
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 );
}
}