Question

I have a number of forms like this:

<form class="some-name">
    <input type="hidden" name="bill" value"flower" />
    <button value="0">Yes</button>
    <button value="1">No</button>
    <button value="2">No</button>
</form>

<form class="some-name">
    <input type="hidden" name="ben" value"men" />
    <button value="0">Yes</button>
    <button value="1">No</button>
    <button value="2">No</button>
</form>

What I want to happen

When a user clicks a button, I want to disable the other buttons within that form.

Currently I’m trying with this jQuery, but it’s not working?

My thinking behind it is the current element is a button so you want it’s parent which is the form and then all the buttons in the form?

$(document).on("click", ".some-name button", function(){
    $($(this)).parent().$("button").attr("disabled", true);
});

also tried:

$(document).on("click", ".some-name button", function(){
    $($(this)).parent("button").attr("disabled", true);
});

but no luck with either?

Answer 1

$(document).on("click", ".some-name button", function(){
    $(this) // currently clicked button
      .siblings("button")  // all neighbor of clicked button
      .prop("disabled", true);  // set disabled
});

Related refs:

• .siblings()

• .prop()