Question

我已经完成了大部分工作。我试图根据所选的单选按钮切换显示的div，这是有效的。另外，我根据它的可见性切换隐藏输入的禁用属性（name = martygeocoderlatlngonly），也可以。

然而，我正努力将最初可见的输入（name = martygeocoderlatlngonly）从readonly切换到disabled，然后再次返回，因为它被带入和离开焦点。

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>

JQUERY：

// 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;
    });
});

Answer 1

    if (this.readOnly = true) {

应该是

    if (this.readOnly == true) {

常见错误：）

Answer 2

this.readOnly = true将this.readOnly设置为true。你想比较它，所以使用两个等号：

if (this.readOnly == true)

或完全省略右侧：

if (this.readOnly)

用jquery切换readonly和disabled

2 个答案: