顯示基於複選框值與div和風格顯示屬性

我已經創建了ASP.NET MVC的Web窗體。顯示基於複選框值與div和風格顯示屬性

我已經成功地設置了我的查看來添加顯示div的複選框，它基於點擊時的值。這是功能的Javascript：

$('div.schedule .input_control').click(function() { 
    var $target = $(this).closest('div').find('.showSchedule'); 
    if (this.checked) { 
     $target.show(); 

    } else { 
     if (confirm("Are you sure you want to exclude this schedule?") == true) { 
     $target.hide(); 
     $(':hidden').not("input[name=__RequestVerificationToken]").val(''); 
     } else { 
     $(this).prop("checked", true); 
     } 
    } 
});

下面是HTML片段，具有複選框和div隱藏和顯示：

<div class="schedule"> 
    @Html.CheckBox("schedule", false, new { @class = "input_control" }) 
    <div style="display: none" class="showSchedule"> 
     //form fields 
    </div> 
</div>

顯示div和成功時隱時現的複選框被選中，並取消選中通過點擊它。確認信息也按預期工作。

但時，有再次驗證錯誤和表單頁面加載DIV隱藏而複選框勾選！

如何確保div總是基於複選框的值顯示？這是非常重要的，因爲當項目被編輯時，表格加載時勾選複選框但隱藏了div。

我意識到這將是因爲默認情況下，我的div風格設置爲「display：none」。

那麼對此有什麼更好的方法呢？

來源

2014-01-30 Qwerty

你有一個活生生的例子，我們可以看一下？您可以使用腳本在'DOM'加載時用'show（）'（'jQuery'）顯示該項目。 –

添加一個函數來檢查複選框被選中或不按文件準備好，如果它的檢查，然後顯示在div，否則隱藏在div

$(document).ready(function() { 
    var $input = $('div.schedule .input_control:checked'); 
    var $target = $input.closest('div').find('.showSchedule'); 
    $target.show(); 
});

來源

2014-01-30 03:23:19 frosdqy

好的。但似乎我必須將其添加到另一個JS文件或嵌入到cshtml頁面中。當我在我的問題中將其添加到同一個JS文件中時，它不起作用。 – Qwerty

此外，這工作，但它顯示所有的時間表類的div。我只想顯示包含複選框的div。該行：var $ target = $（this）.closest（'div'）。find（'。showSchedule'）;和$ target.show（）;我的JS中的訣竅是什麼？但不知道如何實施它與您的建議。 – Qwerty

我已經編輯了答案，我認爲這是你正在尋找的 – frosdqy

顯示基於複選框值與div和風格顯示屬性

回答

相關問題