私はこの作業のほとんどを持っています。選択したラジオボタンに応じて表示されるdivを切り替えようとしていますが、これは機能します。さらに、可視性に応じて非表示の入力 (name=martygeocoderlatlngonly) の無効な属性を切り替えていますが、これも機能します。
ただし、最初に表示された入力 (name=martygeocoderlatlngonly) を読み取り専用から無効に切り替え、焦点を合わせたり外したりするのに苦労しています。
HTML:
<p>Modify:
<label>
<input id="rdb1" type="radio" name="toggler" value="1" checked />Location</label>
<label>
<input id="rdb2" type="radio" name="toggler" value="2" />Lat/Lng</label>
</p>
<div id="blk-1" class="toHide" style="">
<p>
<label for="martygeocoderaddress">Address</label>
<br />
<input class="widefat" type="text" name="martygeocoderaddress" id="martygeocoderaddress" value="" size="30" />
</p>
<p>
<label for="martygeocoderlatlng">Lat/Lng</label>
<br />
<input class="widefat" type="text" name="martygeocoderlatlng" id="martygeocoderlatlng" value="" size="30" readonly />
</p>
</div>
<div id="blk-2" class="toHide" style="display:none;">
<p>
<label for="martygeocoderlatlng">Lat/Lng</label>
<br />
<input class="widefat" type="text" name="martygeocoderlatlngonly" id="martygeocoderlatlng" value="" size="30" disabled/>
</p>
</div>
Jクエリ:
// Toggle display of fields
$("[name=toggler]").click(function () {
//$('.toHide').hide();
$("#blk-" + $(this).val()).each(function () {
//$(this).show();
});
$(":input[name='martygeocoderlatlngonly']").each(function () {
this.disabled = !this.disabled;
});
$(":input[name='martygeocoderlatlng']").each(function () {
if (this.readOnly = true) {
this.readOnly = false;
this.disabled = true;
} else {
this.readOnly = true;
this.disabled = false;
}
});
});
以前はphpを使用して開発していましたが、oopには入ったことがないので、jqueryとjavascriptに少し夢中になっています。
#解決:
$("[name=toggler]").click(function () {
$('.toHide').hide();
$("#blk-" + $(this).val()).each(function () {
$(this).show();
});
$(":input[name='martygeocoderlatlngonly']").each(function () {
this.disabled = !this.disabled;
});
$(":input[name='martygeocoderlatlng']").each(function () {
this.readOnly = !this.readOnly;
this.disabled = !this.disabled;
});
});