logo
down
shadow

JQuery: disable button if select option has certain class


JQuery: disable button if select option has certain class

By : Nicola Pupo D'Andrea
Date : November 22 2020, 09:00 AM
This might help you I have dropdown list with collection options. When option with certain class is selected I want submit button to be disabled. This is what I've tried to do: , Try this
code :
$('#add_to_collection').on('change', function () {
  var $option = $('option:selected', this);
  var $button = $('#add-object-to-collection');
  
  if ($option.hasClass('highlight')) {
    $button.prop('disabled', true).val('Added');
  } else {
    $button.prop('disabled', false).val('Add');
  }
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="addToCollection">
  <select id="add_to_collection">
    <option value="1" class="highlight">1</option>
    <option value="2">1</option>
    <option value="3">3</option>
  </select>
  
  <input  id="add-object-to-collection" type="submit" value="Add" class="button" />
</form>


Share : facebook icon twitter icon
jQuery enable/disable show/hide button w/ SELECT options. Get remaining option values

jQuery enable/disable show/hide button w/ SELECT options. Get remaining option values


By : Sabarinathan
Date : March 29 2020, 07:55 AM
This might help you I believe you can check to see if the option length is >0 saying that it has values and if not then it doesn't exist meaning it doesn't have values like so:
code :
if($("#addedchargeamtid option").length > 0 ) //if addedchargeamtid is the id of select tag
{
   $('#removeButton').show();
}
else
{
  $('#removeButton').hide();
}
Jquery enable/disable button based on select option

Jquery enable/disable button based on select option


By : Maria Kaneteg
Date : March 29 2020, 07:55 AM
will help you A quick demonstration: http://jsfiddle.net/mblase75/vZacx/
code :
$('#picker').on('change', function() {
    $('#' + $(this).val()).prop('disabled', false)
        .siblings().prop('disabled', true);
});​
jQuery - disable select option based on option keyword not by value

jQuery - disable select option based on option keyword not by value


By : Dmitry Bochkanov
Date : March 29 2020, 07:55 AM
hop of those help? I have this HTML select code: , Why not do:
code :
$('select[name=loc_code] option').each(function() {
    if ($(this).text().indexOf('OFF') >= 0) $(this).attr('disabled', 'disabled');
});​
Disable button depending on select option using jquery?

Disable button depending on select option using jquery?


By : Sarah w
Date : March 29 2020, 07:55 AM
Does that help In your code $("option[value='1']") would return a jQuery object which is truthy always so that if statement doesn't make any sense. Although your code only runs once when the page is loaded.
You need to bind a change event handler to update the button based on the current value.
code :
$(document).ready(function() {
  // bind change event handler
  $('#opt').change(function() {
    // update disabled property
    $("button").prop('disabled', this.value == 1);
    // trigger change event to set initial value
  }).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="opt">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<button>button</button>
jquery disable option in select if we chose this option in another select

jquery disable option in select if we chose this option in another select


By : John Gabriel Santos-
Date : March 29 2020, 07:55 AM
To fix the issue you can do What I should do to have no dupplicates in selects? If my select1 = subject1, select2 and select3 option = subject1 should be disabled and if select1 = subject1, select2 = subject2, select3 options subject1 and subject2 should be disabled. Sorry for bad English ;( , Here you go. This updates all options but NOT the current one.
code :
$('document').ready(function() {

  // put in yopur global scope.
  var previous;
  
  // add previous/current value in previous var when input in focus
  $('select.remRep').on('focus', function () {
    previous = this.value;
    
  // when the input detects a change
  }).on('change', function() {
    var t = $(this);
    
    //update the previous value to be enabled
    $('option[value=' + previous + ']').removeAttr('disabled');
    
    // disable new value in other inputs
    $('option[value=' + t.val() + ']').not(t).attr('disabled', true);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel1" class="remRep">
		<option value="0">none</option>
    <option value="1">Subject1</option>
    <option value="2">Subject2</option>
    <option value="3">Subject3</option>
</select>
<select id="sel2" class="remRep">
		<option value="0">none</option>
    <option value="1">Subject1</option>
    <option value="2">Subject2</option>
    <option value="3">Subject3</option>
    <option value="4">Subject4</option>
    <option value="5">Subject5</option>
</select>
<select id="sel3" class="remRep">
		<option value="0">none</option>
    <option value="1">Subject1</option>
    <option value="2">Subject2</option>
    <option value="3">Subject3</option>
    <option value="4">Subject4</option>
    <option value="5">Subject5</option>
</select>
Related Posts Related Posts :
  • How to multiply each element in an array with a different number (javascript)
  • Constructing a query string for JQuery getJSON for a public API GET request
  • Server side error generating RSS - what to return back to user/RSS reader?
  • ES6 code on Nodejs 4.x : Is V8 4.5 a native JS engine that runs ES6 directly?
  • How to only get new data without existing data from a Firebase?
  • How to set default option d3.js
  • using enum in Javascript for month number against name
  • React component only changes state on second onClick event
  • JavaScript text area: add line break
  • Unobtrusive jQuery unobtrusive validation not showing error spans
  • get the location for objects in a firebase array?
  • Multiple addEventListener not storing unique callbacks
  • JQuery, variable inside function not recognized by action
  • User input in Javascript
  • JavaScript Regex Remove Content from String
  • Is there a way to apply a mask on keydown? (JQuery)
  • Redirect A Live Website Visitor Without Them Refreshing or Clicking anything?
  • Exclude HTML tags when translating with Google Translate API
  • Posting to a ColdFusion function from angularJS
  • How to nullify the fadeout?
  • JS not updating on enquire.js breakpoints
  • AngularFire Check if item of same title exists
  • add names to objects based on object value
  • When do you use "class" versus "id"?
  • Get content of loaded SVG file
  • How to find size of an image file from canvas?
  • ui-sref="articles.view({articleId: article._id})" meaning?
  • How to structure Angular with Highcharts and lots of dynamic data
  • Why does a component class needed to be reopened to specify positional params?
  • Can I disable sorting in dgrid for performance gain?
  • Which tools (that are not plugins) can be used to create animation which can be manipulated at runtime?
  • Boostrap carousel not working
  • Ember controllers in nested routes
  • How to reload ng-include in AngularJS?
  • Add enter on event in javascript
  • How to set different background color for each repeated column of RadioButtonList
  • Angular filter data by date
  • Showing multiple info boxes in Google Maps when pulling from MySQL
  • Cordova event DeviceReady don't work on all pages
  • JavaScript document object lastModified using toLocale string
  • TypeError: $(...).autocomplete is not a function $("#partipnt-name").autocomplete({
  • Javascript isnan issue
  • Change variance on mouse movement
  • Highcharts - set xAxis range when using xAxis Categories?
  • Typeahead 0.11.1 Mouse over and keyboard conflict when viewing dropdown search results
  • How to use data from $http.get after page load in Vue.js?
  • How to test angular promise with Jasmine
  • Conditionally chain functions in JavaScript
  • Using QueryBuilder and getting "QueryBuilder is not defined" error
  • slideToggle with bounce effect not working
  • AngularJS binding two variables together without being told to do so
  • Anchor doesn't work
  • set different values for drop down list if check box checked or unchecked
  • Fullscreen slide-toggle with cookie
  • Set variable if input field contains text
  • signin with Linkedin code give me html validation error
  • how to call a jquery function from a form
  • iron router reload specific header element
  • .submit function not running when invalid with kendo validator
  • How to use bind() in JS object init
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co