CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Brandon
Brandon

Reputation: 409

jQuery .prop() not working as expected

I'm hoping someone can help me figure out why this isn't working. I am trying select either a warehouse or a salesman which are stored in 2 separate select inputs, and when you click one input, the other input disables.

The link is to reset the select back to enabled since I can't figure out how to do it aside from "faking" the CSS to make it look disabled. Any help/explanation is greatly appreciated. It's very crude I apologize, I'm learning.

Codepen specifically - http://codepen.io/BrandonSM/pen/bdjjrZ/

jQuery

HTML

    <select id="select_warehouse">
      <option value="chicago">Chicago</option>
      <option value="toronto">Toronto</option>
      <option value="fort-wayne">Fort Wayne</option>
    </select> <a href="#" id="#link_warehouse">CHOOSE WAREHOUSE</a>
    <br><br>or<br><br>
     <select id="select_salesman">
      <option value="james">James</option>
      <option value="chris">Chris</option>
      <option value="shawn">Shawn</option>
    </select> <a href="#" id="#link_salesman">CHOOSE SALESMAN</a>`

jQuery code: 

    $("#select_salesman").click(function(e) {
      e.preventDefault();
      $("#select_warehouse").prop('disabled', true);
    });


    $("#link_warehouse").click(function(e) {
      e.preventDefault();
      $("#select_warehouse").prop('disabled', false);
    });

    $("#select_warehouse").click(function(e) {
      e.preventDefault();
      $("#select_salesman").prop('disabled', true);
    });

    $("#link_salesman").click(function(e) {
      e.preventDefault();
      $("#select_salesman").prop('disabled', false);
    });

Upvotes: 2

Views: 532

Answers (2)

Mahima
Mahima

Reputation: 26

$("#link_warehouse").click(function() {
 $("#select_warehouse").prop('disabled', false);
  $("#select_salesman").prop('disabled', true);   
});

$("#link_salesman").click(function() {
  $("#select_salesman").prop('disabled', false);
  $("#select_warehouse").prop('disabled', true);  
});

Fiddle: https://jsfiddle.net/mahima154/j2nvkabw/

Upvotes: 0

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Change 

<a href="#" id="#link_warehouse">CHOOSE WAREHOUSE</a>
<a href="#" id="#link_salesman">CHOOSE SALESMAN</a>

into 

<a href="#" id="link_warehouse">CHOOSE WAREHOUSE</a>
<a href="#" id="link_salesman">CHOOSE SALESMAN</a>

DEMO -- is it like this you want?

Upvotes: 2

Related Questions