顯示/隱藏預填表格

Question

我有一個問題的表單。如果回答是，則會出現一組複選框;如果回答沒有任何反應。

<tr> 
    <td>Question?</td> 
    <td> 
    <label><input name="selector" type="radio" value="yes" />Yes</label> 
    <label><input name="selector" type="radio" value="no" />No</label> 
    <br /> 
    <div id="subset"> 
     <label class="disabled"><input name="select1" type="checkbox" value="select1" />option1</label><br /> 
     <label class="disabled"><input name="select2" type="checkbox" value="select2" />option2</label><br /> 
     <label class="disabled"><input name="select3" type="checkbox" value="select3" />option3</label><br /> 
     <label class="disabled"><input name="select4" type="checkbox" value="select4" />option4</label> 
    </div> 
    </td> 
</tr> 

<script> 
    $(document).ready(function(){ 
    $('input[name=selector]').click(function(){ 
     var selector = $(this).val(); 

     if (selector == 'no') { 
     $('#subset label').addClass('disabled'); 
     $('#subset input').attr('disabled', 'disabled'); 
     $('#subset input').attr('checked', false); 
     } else { 
     $('#subset label').removeClass('disabled'); 
     $('#subset input').removeAttr('disabled'); 
     } 
    }); 
    }); 
</script> 

該代碼工作正常，但表格可以預先填寫。如果是這樣，它必須以相同的方式工作：如果選擇「是」，則應該可見sset。

我知道我可以很容易地用jQuery在單獨的代碼塊中執行此操作（請參閱下面的內容），但我希望能夠通過僅改變現有代碼來做到這一點。

var selector = $('input[name=selector]:checked').val(); 
if (selector == 'no') { 
    $('#subset label').addClass('disabled'); 
    $('#subset input').attr('disabled', 'disabled'); 
    $('#subset input').attr('checked', false); 
} else { 
    $('#subset label').removeClass('disabled'); 
    $('#subset input').removeAttr('disabled'); 
} 

預填充完成smarty，看起來像下面的代碼，我把所有的收音機和複選框標籤。

{{if $array.ELEMENT.answer=='VALUE'}} checked{{/if}} 

所以問題是，如何在不增加大量代碼的情況下獲得額外的功能？

謝謝！

Answer 1

只是觸發 click事件..在DOM ready事件..

$(function(){ 
    $('input[name=selector]').click(function(){ 
     var selector = $(this).val(); 

     if (selector == 'no') { 
     $('#subset label').addClass('disabled'); 
     $('#subset input').attr('disabled', 'disabled'); 
     $('#subset input').attr('checked', false); 
     } else { 
     $('#subset label').removeClass('disabled'); 
     $('#subset input').removeAttr('disabled'); 
     } 
    }); 
    $('input[name=selector]:checked')​.click();​ 
    // Will trigger the click event on page load 
}); 

因此，基於預先填好的表格這將觸發事件爲被檢查的項目上。

Check Fiddle

Answer 2

您是否可以將點擊處理程序重構爲一個函數，並在點擊和頁面加載時調用該代碼？

Answer 3

試試jQuery的toggleClass。它在每個替代呼叫中添加/刪除類。 有關更多詳細信息，請參見http://api.jquery.com/toggleClass/。

Answer 4

只是隔離你的函數在一個單獨的塊：

function processForm(){ 
    var selector = $('input[name=selector]:checked').val(); 

    if (selector == 'no') { 
    $('#subset label').addClass('disabled'); 
    $('#subset input').attr('disabled', 'disabled'); 
    $('#subset input').attr('checked', false); 
    } else { 
    $('#subset label').removeClass('disabled'); 
    $('#subset input').removeAttr('disabled'); 
    } 
} 

然後，您可以直接或你的點擊中調用它。