0

さて、チェックボックスの選択に基づいて 2 つのフォーム フィールドを表示しようとしています。これら 2 つのフォーム フィールドは必須です。したがって、基本的にチェックボックスが選択されている場合は、フィールドを表示して必須にする必要があります。それ以外の場合は非表示であるため、必要ありません。show hide sorta が機能しています。選択解除 (グループ内の別のチェックボックスの選択) では確実に非表示になりません。また、それらが非表示になっている場合でも必要なので、素晴らしいエラーが発生します...

私は立ち往生しています。提案がある人。私はまだかなり新しいです。前もって感謝します。これが私が以下に持っているものです：

    <label for="nothing">
    Test Method<br/>
    <label>
        <input type="checkbox" class="testmethod" id="kickback" name="kickback" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['kickback'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
            Kickback
    </label>
    <label>
        <input type="checkbox" class="testmethod" id="manual" name="manual" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['manual'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
            Manual
    </label>
    <label>
        <input type="checkbox" class="testmethod" id="beastmode" name="beastmode" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['beastmode'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
            Beast Mode
    </label>                
</label>
    <label for="my-text-field" id="mytextfield" style="visibility:hidden">
    My Text Field <em>&nbsp;<small>*Required*</small></em>
    <input type="text" name="mytextfield" value="<?= $settings['mytextfield'] ?>" tabindex="6" required/>
</label>

<label for="my-number-field" id="mynumberfield" style="visibility:hidden">
    Number of Images <em>&nbsp;<small>*Required*</small></em>
    <input type="number" name="mynumberfield" value="<?= $settings['mynumberfield'] ?>" tabindex="7" required/>
</label>

そして、これが私のJSです

$("input.testmethod").click(function() {

$('input:checkbox[class="' + $(this).attr('class') + '"]').prop('checked', false);
$(this).prop('checked', true);

});

function yesnoCheck() {
if (document.getElementById('beastmode').checked) 
{
    document.getElementById('mytextfield').style.visibility = 'visible'
    document.getElementById('mynumberfield').style.visibility = 'visible';        
}
else
{
    document.getElementById('mytextfield').style.visibility = 'hidden';
    document.getElementById('mynumberfield').style.visibility = 'hidden';  
} 

}
4

3 に答える 3

3

あなたの質問を明確にしてみてください。あなたが何を望んでいるのか理解するのに苦労しました. my-text-field と my-number-field の値は、チェックされた入力値に基づいている必要がありますか?

わかりました、これはうまくいくはずです。

$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
    $('#mytextfield').show();
    $('#mynumberfield').show();
    $('input[name="mytextfield"]').prop('required',true);
    $('input[name="mynumberfield"]').prop('required',true);
} else {
    $('#mytextfield').hide();
    $('#mynumberfield').hide();
    $('input[name="mytextfield"]').prop('required',false);
    $('input[name="mynumberfield"]').prop('required',false);        
}
});

フィドルhttp://jsfiddle.net/n67Mf/1/

タグをいくつか閉じて、不要なコードをいくつか削除しました。

于 2013-10-03T05:53:44.580 に答える
0

RequiredFieldValidator で検証グループを使用し、チェックボックスが選択されたときにこのメソッドを呼び出します。

于 2013-10-03T06:06:18.260 に答える
0

このコードを使用してください

document.getElementById("ID").required = false;

あなたのコードで

function yesnoCheck() {
   if (document.getElementById('beastmode').checked) 
   {
         document.getElementById('mytextfield').style.visibility = 'visible'
         document.getElementById('mynumberfield').style.visibility = 'visible';
         document.getElementById("mytextfield").required = true;
         document.getElementById("mynumberfield").required = true;  
   }
   else
   {
      document.getElementById('mytextfield').style.visibility = 'hidden';
      document.getElementById('mynumberfield').style.visibility = 'hidden';
      document.getElementById("mytextfield").required = false;
      document.getElementById("mynumberfield").required = false; 
   } 

}

http://jsfiddle.net/rvPPg/をチェックして、それがどのように機能するかを確認してください

于 2013-10-03T06:17:23.590 に答える