Opened 9 years ago

Closed 9 years ago

Last modified 7 years ago

#5938 closed bug (notabug)

Button: disabled button doesn't reenable with JQuery.

Reported by: GrenadeGuy187 Owned by:
Priority: minor Milestone:
Component: ui.button Version: 1.8.4
Keywords: Cc:
Blocked by: Blocking:

Description

I use this code for changing how selection works on radio buttons:

$(document).ready(function () {
            // Disable 2nd and 3rd columns of preference radio buttons
            $("input:radio[name='pref2']").attr("disabled", "disabled");
            $("input:radio[name='pref3']").attr("disabled", "disabled");

            // Initially, there are no selections
            pref1 = "";
            pref2 = "";
            pref3 = "";

            // Helper function to change selection of a preference radio button (back to a prior setting)
            function select(radioName, radioValue) {
                if (radioValue == "") {
                    $("input:radio[name='" + radioName + "']:checked").removeAttr("checked");
                    if (radioName == "pref2") {
                        $("input:radio[name='pref3']").attr("disabled", "disabled");
                    }
                }
                else {
                    $("input:radio[name='" + radioName + "'][value='" + radioValue + "']").attr("checked", "checked");
                }
            }

            // User changed preference 1, ensure selection doesn't conflict with their preference 2 or 3
            $("input:radio[name='pref1']").click(function () {
                $("input:radio[name='pref2']").removeAttr("disabled");

                if ($(this).attr("value") == $("input:radio[name='pref2']:checked").attr("value")) {
                    //alert("Second preference conflicts");
					return false;
                    //select("pref1", pref1);
                } else if ($(this).attr("value") == $("input:radio[name='pref3']:checked").attr("value")) {
                    //alert("Third preference conflicts");
					return false;
                    //select("pref1", pref1);
                } else {
                    // No conflict, pref1 now has newly selected value
                    pref1 = $(this).attr("value");
                }
            });

            // User changed preference 2, ensure selection doesn't conflict with their preference 1 or 3
            $("input:radio[name='pref2']").click(function () {
                $("input:radio[name='pref3']").removeAttr("disabled");

                if ($(this).attr("value") == $("input:radio[name='pref1']:checked").attr("value")) {
                    //alert("First preference conflicts");
					return false;
                    //select("pref2", pref2);
                } else if ($(this).attr("value") == $("input:radio[name='pref3']:checked").attr("value")) {
                    //alert("Third preference conflicts");
					return false;
                    //select("pref2", pref2);
                } else {
                    // No conflict, pref2 now has newly selected value
                    pref2 = $(this).attr("value");
                }
            });

            // User changed preference 3, ensure selection doesn't conflict with their preference 1 or 2
            $("input:radio[name='pref3']").click(function () {
                if ($(this).attr("value") == $("input:radio[name='pref1']:checked").attr("value")) {
                    //alert("First preference conflicts");
					return false;
                    //select("pref3", pref3);
                } else if ($(this).attr("value") == $("input:radio[name='pref2']:checked").attr("value")) {
                    //alert("Second preference conflicts");
					return false;
                    //select("pref3", pref3);
                } else {
                    // No conflict, pref3 now has newly selected value
                    pref3 = $(this).attr("value");
                }
            });
			$("input:radio").button();
        });

Here's the HTML it's referring to:

<body>
    <table>
        <tr>
            <td>
                <input type="radio" name="pref1" value="1" id="radio1" /><label for="radio1">Choice 1</label>
            </td>
            <td>
                <input type="radio" name="pref2" value="1" id="radio2" /><label for="radio2">Choice 2</label>
            </td>
            <td>
                <input type="radio" name="pref3" value="1" id="radio3" /><label for="radio3">Choice 3</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="pref1" value="2" id="radio4" /><label for="radio4">Choice 4</label>
            </td>
            <td>
                <input type="radio" name="pref2" value="2" id="radio5" /><label for="radio5">Choice 5</label>
            </td>
            <td>
                <input type="radio" name="pref3" value="2" id="radio6" /><label for="radio6">Choice 6</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="pref1" value="3" id="radio7" /><label for="radio7">Choice 7</label>
            </td>
            <td>
                <input type="radio" name="pref2" value="3" id="radio8" /><label for="radio8">Choice 8</label>
            </td>
            <td>
                <input type="radio" name="pref3" value="3" id="radio9" /><label for="radio9">Choice 9</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="pref1" value="4" id="radio10" /><label for="radio10">Choice 10</label>
            </td>
            <td>
                <input type="radio" name="pref2" value="4" id="radio11" /><label for="radio11">Choice 11</label>
            </td>
            <td>
                <input type="radio" name="pref3" value="4" id="radio12" /><label for="radio12">Choice 12</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="pref1" value="5" id="radio13" /><label for="radio13">Choice 13</label>
            </td>
            <td>
                <input type="radio" name="pref2" value="5" id="radio14" /><label for="radio14">Choice 14</label>
            </td>
            <td>
                <input type="radio" name="pref3" value="5" id="radio15" /><label for="radio15">Choice 15</label>
            </td>
        </tr>
    </table>
</body>

When I apply a JQueryUI ui.button effect to the radio buttons, they don't enable when they should.

Change History (2)

comment:1 Changed 9 years ago by Scott González

Resolution: invalid
Status: newclosed

You have to call .button( "refresh" ) whenever you manually change the state of the underlying button/checkbox/radio.

comment:2 Changed 7 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.