2013-10-18 43 views
1

我的HTML代碼一個div:隱藏使用JavaScript

<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個文字區域。如果這三個textareas中的行數不相等,代碼將顯示錯誤消息Mismatch between VBUS ID, Target ID and 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-listtarget-id-list之間的行數不匹配的錯誤代碼和lun-id-list。但是,當我試圖隱藏這些textareas使用第一個單選按鈕(選擇os_others(),隱藏hpux-details-lunlist)我可以隱藏textarea,但錯誤消息不隱藏。它仍然會顯示消息Mismatch between VBUS ID, Target ID and LUN ID Counts

如果你看到我的上面的代碼,我已經包括($("#hpux-details-lunlist").attr("disabled") == "disabled")),如果這真的隱藏div error1。但這不適合我。錯誤消息不斷顯示在那裏?我怎樣才能隱藏它?

+1

請正確縮進您的代碼!這很難閱讀。 – ComFreek

+0

你應該縮進你的JS,用2(或4)個空格。 – dezman

回答

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/

+0

它給了我錯誤'未捕獲的TypeError:對象#沒有方法'prop''在控制檯上 – acr

+0

@acr'.prop()'被添加到版本1.6中的jQuery。你應該使用更新的版本。 – iambriansreed

+0

我已將jQuery更新爲最新版本。現在我沒有在控制檯中發現任何錯誤,但是當我選擇其他選項時,error1仍然出現 – acr