CODEWITHSUNDEEP
javascriptjquery
Marian Pavel
Marian Pavel

Reputation: 2876

Changing attribute not working as expected

I made the following example to describe my problem:

$("tr > td > #arm").on("click", function() {
  $(this).parent().children("#arm").prop("disabled", true);
  $(this).parent().children("#disarm").prop("disabled", false);
});

$("tr > td > #disarm").on("click", function() {
  $(this).parent().children("#arm").prop("disabled", false);
  $(this).parent().children("#disarm").prop("disabled", true);;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <button id="arm" disabled>Arm</button>
    </td>
    <td>
      <button id="disarm">Disarm</button>
    </td>
  </tr>
</table>

<script>
</script>

I have the above table with one row that contains 2 cells and a button in each cell. One of them is disabled so I made a script where when I press the second button it should enable the first one and disable the one which was clicked.

Disabling the button that was clicked work as I expected but I don't know why it doesn't enable the other button.

Upvotes: 0

Views: 130

Answers (6)

pumpkinzzz
pumpkinzzz

Reputation: 2967

You're not selecting the right element. Your code is

$(this).parent().children("#disarm")

where $(this) is the #arm element, then parent() is the td cell.

So basically you're searching for a children element (#disarm) of that cell, that's why he can't find it

Try with this instead

$("tr > td > #arm").on("click", function() {
    $(this).prop("disabled", true);
    $(this).closest("tr").find("#disarm").prop("disabled", false);
});

$("tr > td > #disarm").on("click", function() {
    $(this).closest("tr").find("#arm").prop("disabled", false);
    $(this).prop("disabled", true);
});

Here it is a WORKING DEMO of your code :)

Upvotes: 1

epascarello
epascarello

Reputation: 207511

There is no reason to select the parent when you click on the button.

$(this).parent().children("#arm").prop("disabled", true);

should just be

$(this).prop("disabled", false);

Now when you are trying to pick the other element you do this.

  • You pick the parent of the button
  • You look for the other button inside of that element.

The problem is the button is in a sibling of the parent. But there is no need to select the parents when you have the id. Just select it by its id to start, it will be faster.

$("table tbody").on("click", "button", function() {
  var btn = $(this).prop("disabled", true);
  var  opposite = btn.attr("id") === "disarm" ? "#arm" : "#disarm";
  $(opposite).prop("disabled", false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <button id="arm" disabled>Arm</button>
    </td>
    <td>
      <button id="disarm">Disarm</button>
    </td>
  </tr>
</table>

Upvotes: 0

user6241578
user6241578

Reputation:

Here is the solution of your problem. Use removeAttr to remove disabled to the element. 

           <table>
            <tr>
                <td>
                    <button id="arm" disabled>Arm</button>
                </td>
                <td>
                    <button id="disarm">Disarm</button>
                </td>
            </tr>
        </table>

        <script>
            $("tr > td > #arm").on("click", function() {
                $("#arm").prop("disabled", true);
                $("#disarm").removeAttr("disabled");
            });

            $("tr > td > #disarm").on("click", function() {
               $("#arm").removeAttr("disabled");
               $("#disarm").prop("disabled", true);;
            }); 
        </script>

here is a jsfiddle of a working example

Upvotes: 0

Mustapha Larhrouch
Mustapha Larhrouch

Reputation: 3393

you need to use prev and next

$("tr > td > #arm").on("click", function() {
    $(this).parent().children("#arm").prop("disabled", true);
    $(this).parent().next().children("#disarm").prop("disabled", false);
});
$("tr > td > #disarm").on("click", function() {
    $(this).parent().prev().children("#arm").prop("disabled", false);
    $(this).parent().children("#disarm").prop("disabled", true);;
});

https://jsfiddle.net/hfr33exa/1/

Upvotes: 1

SpringLearner
SpringLearner

Reputation: 13844

you can add a class and then use prop function as below

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <button id="arm" disabled class="test">Arm</button>
                </td>
                <td>
                    <button id="disarm" class="test">Disarm</button>
                </td>
            </tr>
        </table>

        <script>
        $('.test').click(function(){
            $(".test").prop('disabled', function () {
   return ! $(this).prop('disabled');
});
});
        </script>
    </body>
</html>

DEMO

description: I have added a class test to all the buttons and then I used the prop function. So the button on which click event occurs is disabled and rest all are enabled

Upvotes: 0

Drag13
Drag13

Reputation: 5988

Try to totatlly remove disable attribute from element. As far as I know not all browsers correctly works with disable="false"

Upvotes: 0

Related Questions