如何隱藏單選按鈕，直到發生什么？

Question

所以我想隱藏一個單選按鈕，直到填寫完表單，但我不知道如何做。 我嘗試了.hide（）; 當我將其放在.submit函數之外但不在其內部工作時，該方法可行。 這是使用jquery和bootstrap。

這是我擁有的JS的一個小版本（“同意”是單選按鈕）：

$('myForm').submit(function(e){
    var firstName = $('first-name').val();
    var pattern = /^$/;
    var error = '';
    var checkbox = document.getElementById('agree');

    if(pattern.test(firstName)){
       error += 'Error: enter first name.\n';
    }

    if(error.length != 0){
        alert(error);
        e.preventDefault();
    }

});

我想隱藏單選按鈕，直到填寫表單的名字部分，然后單選按鈕才會出現。

Answer 1

我將為此使用普通的JavaScript：

<input type="text" name="first-name" value="" onchange="document.getElementById('agree').style.display = (this.value == '' ? 'block' : 'none' );"/>
<input type="checkbox" name="agree" value="Agree" style="display:none"/>

編輯：執行此操作的其他方法是使用onkeydown，onkeyup或onblur代替onchange

Answer 2

像這樣在您的收音機中放置一個id：

<input type="radio" id="rad" />

然后使用jquery這樣隱藏它：

$('#rad').hide();

然后，如何在發生某事時顯示它的示例如下：

If ($('#something') > 10) {
    $('#rad').show();
}

希望這對您有所幫助:)

Answer 3

這是一個使用jquery的簡單示例... http://jsfiddle.net/wa8rxj43/2/

HTML

 <input type="text" id="name" class="name">
 <input class="not-display" id="somecheck" type="checkbox" name="vehicle" value="Car" checked>

JavaScript的

$('#somecheck').hide();

$("#name").bind({
    'input':function(){
        if(this.value.length > 0)
        {
            $('#somecheck').show();
        }
        else
        {
            $('#somecheck').hide();
        }

    }
});

編輯：根據OP的要求刪除了CSS。