75590

How to disable button If I select NO in dropdown list

Question:

The code is simply like this:

<select id="productextra[@count@]"> <option value="[@option_id@]">Yes</option> <option value="[@option_id@]">No</option> </select>

The button should be disable is: Add to cart

Answer1:

Write an onchange event for your select and find the selected value

<button id="btnSubmit" type="submit">Add to cart</button>

<strong>JS</strong>

$("select").on('change',function(){ if($(this).find('option:selected').text()=="No") $("#btnSubmit").attr('disabled',true) else $("#btnSubmit").attr('disabled',false) });

<strong>Sample Snippet</strong>

<pre class="snippet-code-js lang-js prettyprint-override">$("select").on('change',function(){ if($(this).find('option:selected').text()=="No") $("#btnSubmit").attr('disabled',true) else $("#btnSubmit").attr('disabled',false) }); <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="productextra[@count@]"> <option value="[@option_id@]">Yes</option> <option value="[@option_id@]">No</option> </select> <button id="btnSubmit" type="submit">Add to cart</button>

Answer2:

var sel = document.getElementById('productextra'); var sv = sel.options[sel.selectedIndex].value;

This will give the value of selected option in which you can disable the button using

document.getElementById("myBtn").disabled = true;

Answer3:

Your HTML should be like this:

<select id="productextra0"> <option value="0">Yes</option> <option value="1">No</option> </select> <button type="submit" id="submit-button">Add to cart</button>

and javascript:

window.onload=function() { document.getElementById("productextra0").onchange=function() { if(this.options[this.selectedIndex].value==1) { document.getElementById("submit-button").disabled=true; } else { document.getElementById("submit-button").disabled=false; } } }

<a href="http://jsfiddle.net/1o754d3w/" rel="nofollow">here is the working demo</a>

I added an id for the add to cart button so it can easily be accessed via javascript document.getElementById, now I added event handler for dropdown onchange event, this means a function will trigger every time the dropdownchanges value. When dropdown change its value the function will check if its equal to 1 then it will disable your add to cart button, else it will enable it back.

I also put the function into windows.onload so that we can ensure that onchange function will only be attached to your dropdown when its ready or already been created by the browser.

Answer4:

button

<button id="btn" type="submit">Add to cart</button>

jquery

$("#btn").prop("disabled", true);

Recommend

  • IE11 textarea loses focus if another textarea is disabled
  • How can I reset dropdown data if modal closed on vue component?
  • jquery code not working without breakpoint
  • How to getText() from the input field of an angularjs Application
  • SAVE attribute needed for Fortran variables when only the C_LOC address is returned to a C program?
  • saving file generated by TCPDF
  • Button click event not firing in jQuery
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • d3 v4 drag and drop with TypeScript
  • JSON response opens as a file, but I can't access it with JavaScript
  • Uncaught Error: Could not find module `ember-load-initializers`
  • req.body is undefined - nodejs
  • Modifying destination and filename of gulp-svg-sprite
  • MySQL WHERE-condition in procedure ignored
  • Importing jscolor library in angular 2
  • Web-crawler for facebook in python
  • Calling of Constructors in a Java
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Traverse Array and Display in markup
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • Transpose CSV data with awk (pivot transformation)
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • How do I configure my settings file to work with unit tests?
  • How to stop GridView from loading again when I press back button?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?