Search and Top Navigation
#5938 closed bug (notabug)
Opened August 12, 2010 05:18PM UTC
Closed August 12, 2010 05:43PM UTC
Last modified October 11, 2012 09:15PM UTC
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.
You have to call .button( "refresh" ) whenever you manually change the state of the underlying button/checkbox/radio.