CODEWITHSUNDEEP
javascriptjquery
leonardeveloper
leonardeveloper

Reputation: 1853

jQuery .prop("disabled",true) not working

I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.

Upvotes: 1

Views: 1670

Answers (2)

George
George

Reputation: 36784

Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:

$("#loads option").each(function(){
    thisNumber = this.value;
    $("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
    $("#displays table").hide();
});

We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.

$(document).on("change","#loads", function(){
    $("#displays table").hide();
    $("#displays table[data-table="+this.value+"]").show();
});

JSFiddle

Upvotes: 1

Jay Shukla
Jay Shukla

Reputation: 5826

Try to bind click event also.

Demo

$(document).on("change click","#loads",...

Upvotes: 0

Related Questions