<!DOCTYPE html>
<title></title>
<style type="text/css">
p[role="radiogroup"][aria-disabled=true] {
background : #ddd;
color : #888;
}
p[role="radiogroup"][aria-disabled=false] {
background : #fdd;
}
</style>
<body>
<form id="test" action="#">
<p role="radiogroup" aria-controls="times" onclick="hoge.call(this, event)">
<input type="radio" name="food" value="0" checked>食事無
<input type="radio" name="food" value="1">食事付
</p>
<p role="radiogroup" aria-disabled="true" id="times">
<input type="radio" name="time" value="0" disabled>朝
<input type="radio" name="time" value="1" disabled>昼
<input type="radio" name="time" value="2" disabled>晩
</p>
<hr>
<p role="radiogroup" aria-controls="types" onclick="hoge.call(this, event)">
<input type="radio" name="car" value="0" checked>車無
<input type="radio" name="car" value="1">車付
</p>
<p role="radiogroup" aria-disabled="true" id="types">
<input type="radio" name="type" value="0" disabled>普通
<input type="radio" name="type" value="1" disabled>大型
</p>
<hr>
<p><em>本当は、これでいいのでは?</em><p>
<p>
<input type="radio" name="food_time" value="0" checked>食事無
<input type="radio" name="food_time" value="1">朝
<input type="radio" name="food_time" value="2">昼
<input type="radio" name="food_time" value="3">晩
</p>
</form>
<script type="application/javascript; version=1.8">
(function () {
var setDisable =
function (n, state) {
n.disabled = ('undefined' === this.state) ? state: this.state;
};
var hasRole =
function (n) {
return (this) ? n.getAttribute ('role') == this: !! n.getAttribute ('role');
};
var isRadio =
function (n) {
return hasRole.call ('radiogroup', n) || ! ('INPUT' != n.nodeName || 'radio' != n.type)
};
var setter = function (evt) {
var target = evt.srcElement || evt.target;
var doc = this.ownerDocument;
var group_name;
var radio;
var state;
var parent;
if (isRadio (target))
if (hasRole.call ('radiogroup', this))
if (group_name = this.getAttribute ('aria-controls')) {
parent = doc.getElementById (group_name);
radio = parent.querySelectorAll ('input[type=radio]');
state = parent.getAttribute ('aria-disabled') != 'true';
Array.forEach (radio, setDisable, {state :state});
parent.setAttribute ('aria-disabled', String (state));
}
};
this.hoge = setter;
})();
</script>