Hiding a div using javascript

Question

My HTML Code:

<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>

In above code, I have 3 textareas in div id hpux-details-lunlist . If the count of lines in these three textareas are not equal the code will give an error message Mismatch between VBUS ID, Target ID and LUN ID Counts . This error message is echoing to a another 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;
    }   
});

The issue I am facing :

I am able display the error code for the line count mismatch between textareas vbus-id-list , target-id-list and lun-id-list . But when when I am trying to hide these textareas using the first radio button (on selection of os_others() , hiding the hpux-details-lunlist ) I am able to hide the textarea, but the error message is not hiding. It will still show the message Mismatch between VBUS ID, Target ID and LUN ID Counts

If you see my above code, I have included ($("#hpux-details-lunlist").attr("disabled") == "disabled")) and if this true hiding the div error1 . But this is not working for me. the error message keep showing there ? How can I hide that ?

Answer 1

I guess that it is because you use attr instead of prop :

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

See for example this answer : https://stackoverflow.com/a/5876747/1127669 and see http://api.jquery.com/prop/ for reference.

Answer 2

Change:

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

to:

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

The .prop() method should be used to get/set disabled instead of the .attr() method.

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

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

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

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

There are actually a few more issues in your code that should be altered.

Source: http://api.jquery.com/prop/