javascript - 使用javascript隐藏一个div

Question

我的 HTML 代码:

<div class="input-main">
    <div class="block">
        <div class="input-quest">What is your server OS</div>
        <div class="input-resp">
            <input onClick="os_others();" type="radio" name="button2" value="Yes" <?php if(!isset($_POST['button2']) || (isset($_POST['button2']) && $_POST['button2'] == 'Yes')) echo ' checked="checked"'?> checked /><label>Others</label>   
            <input onClick="os_hpux();" type="radio" name="button2" value="No" <?php if(isset($_POST['button2']) && $_POST['button2'] == 'No')  echo ' checked="checked"';?> /><label>HP-UNIX</label>
        </div>  
        </div>  

    <div id="lunidlist" >
        <div class="block-with-text-area">
        <div class="input-quest-with-text-area">Enter your LUN IDs in Hex(one ID in one line)</div>
        <div class="input-resp-with-text-area"><span><textarea  class="textarea" id="lunids" name="lunids" type="text"><?php if(isset($_POST['lunids'])) { echo htmlentities ($_POST['lunids']); }?></textarea></span> </div>   
        </div>
    </div>


<div id="hpux-details-lunlist"style="display:none;" >
    <div class="block-no-height">
            <div class="sub_headings">Enter your vbus,target and LUN ids(one in one line)</div>
        <div class="hupux-wrap-textarea">
            <div class="hpuxleft">      
                <div class="input-quest-hpux-vbus-textarea">Vbus<br/>( 0 - F )</div>
                <div class="input-resp-hpux-vbus-textarea"><span><textarea  class="textarea" id="vbus-id-list" name="vbus-id-list" type="text"><?php if(isset($_POST['vbus-id-list'])) { echo htmlentities ($_POST['vbus-id-list']); }?></textarea></span> </div>   
                </div>      

            <div class="hpuxright">
                <div class="input-quest-hpux-lun-textarea">LUN ID(In Hex)<br/>( 0 - 7 )</div>
                <div class="input-resp-hpux-lun-textarea"><span><textarea  class="textarea" id="lun-id-list" name="lun-id-list" type="text"><?php if(isset($_POST['lun-id-list'])) { echo htmlentities ($_POST['lun-id-list']); }?></textarea></span> </div>    
            </div>

            <div class="hpuxcenter">    
                <div class="input-quest-hpux-target-textarea">Target<br/>( 0 - F )</div>
                <div class="input-resp-hpux-target-textarea"><span><textarea  class="textarea" id="target-id-list" name="target-id-list" type="text"><?php if(isset($_POST['target-id-list'])) { echo htmlentities ($_POST['target-id-list']); }?></textarea></span> </div> 
            </div>
        </div>
    </div>
</div>
    <div id="error1" style="display:none;"></div>

</div>

在上面的代码中，我在 div id hpux-details-lunlist 中有 3 个文本区域。如果这三个文本区域中的行数不相等，代码将给出错误消息 VBUS ID、Target ID 和 LUN ID Counts 不匹配。此错误消息正在回显到另一个 div error1

JavaScript:

function os_hpux()  {
    $('#lunids').slideUp("fast");
    $('#hpux-details-lunlist').slideDown("fast");
    document.getElementById("lunids").value=""; 
    $('#lunids').attr("disabled","disabled");
    $('#hpux-details-lunlist').removeAttr("disabled");
}

function os_others()    {
    $('#lunids').slideDown("fast");
    $('#lunids').removeAttr("disabled");
    $('#hpux-details-lunlist').slideUp("fast");
    $('#hpux-details-lunlist').attr("disabled","disabled");
    document.getElementById("vbus-id-list").value="";
    document.getElementById("lun-id-list").value="";
    document.getElementById("target-id-list").value="";
}

function fun_vcount() {
    vcount = 0;
    var lines = $("#vbus-id-list").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > 0) vcount++;
    }
}

function fun_tcount() {
    tcount = 0;
    var lines = $("#target-id-list").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > 0) tcount++;
    }
}

function fun_lcount() {
    lcount = 0;
    var lines = $("#lun-id-list").val().split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > 0) lcount++;
    }
}

$("#vbus-id-list").keyup(function () {
    fun_vcount()
    fun_tcount()
    fun_lcount()
    var message;

    if(((vcount ==tcount) && (vcount == lcount)) || (!$("#vbus-id-list").val()) || (!$("#target-id-list").val()) || (!$("#lun-id-list").val()) || ($("#hpux-details-lunlist").attr("disabled") == "disabled")) {
        $("#error1").slideUp("fast");
    }

    else{
        message ="Mismatch between VBUS ID, Target ID and LUN ID Counts";
        $("#error1").slideDown("fast");
        document.getElementById('error1').innerHTML=message;
    }
});

$("#target-id-list").keyup(function () {
    fun_vcount()
    fun_tcount()
    fun_lcount()
    var message;
    if(((vcount ==tcount) && (vcount == lcount)) || (!$("#vbus-id-list").val()) || (!$("#target-id-list").val()) || (!$("#lun-id-list").val()) || ($("#hpux-details-lunlist").attr("disabled") == "disabled")) {
        $("#error1").slideUp("fast");
    }

    else{
        message ="Mismatch between VBUS ID, Target ID and LUN ID Counts";
        $("#error1").slideDown("fast");
        document.getElementById('error1').innerHTML=message;
    } 
});

$("#lun-id-list").keyup(function () {
    fun_vcount()
    fun_tcount()
    fun_lcount()
    var message;
    if(((vcount ==tcount) && (vcount == lcount)) || (!$("#vbus-id-list").val()) || (!$("#target-id-list").val()) || (!$("#lun-id-list").val()) || ($("#hpux-details-lunlist").attr("disabled") == "disabled")) {
        $("#error1").slideUp("fast");
    }

    else{
        message ="Mismatch between VBUS ID, Target ID and LUN ID Counts";
        $("#error1").slideDown("fast");
        document.getElementById('error1').innerHTML=message;
    }   
});

我面临的问题:

我能够显示文本区域 vbus-id-list、target-id-list 和 lun-id- 之间行数不匹配的错误代码列表。但是当我尝试使用第一个单选按钮隐藏这些文本区域时(选择 os_others()，隐藏 hpux-details-lunlist)我能够隐藏文本区域，但错误消息并未隐藏。它仍然会显示消息Mismatch between VBUS ID, Target ID and LUN ID Counts

如果你看到我上面的代码，我已经包含了 ($("#hpux-details-lunlist").attr("disabled") == "disabled")) 如果这是真的隐藏 div error1。但这对我不起作用。错误消息一直显示在那里？我怎样才能隐藏它？

Answer 1

改变:

($("#hpux-details-lunlist").attr("disabled") == "disabled"))

到:

$("#hpux-details-lunlist").prop("disabled")

应该使用 .prop() 方法来获取/设置禁用，而不是 .attr() 方法。

错误:$('#hpux-details-lunlist').attr("disabled","disabled");

好: $('#hpux-details-lunlist').prop("disabled",true);

错误:$('#lunids').removeAttr("disabled");

好 $('#lunids').prop("disabled", false);

实际上您的代码中还有一些问题需要更改。

来源:http://api.jquery.com/prop/