php - HTMLラジオボタンは、Javascriptまたは

Question

さて、私はこのようないくつかのラジオボタンを備えたhtmlフォームを持っています...

    <tr class="AccountSettingtable">
            <td class="tableHeader">+ Graphics</td>
            <td class="tableHeader">Daily  <input type="radio" name="graphics" value="daily" /></td>
            <td class="tableHeader">Never  <input type="radio" name="graphics" value="never" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Logo Design</td>
            <td><input type="radio" name="logo" /></td>
            <td><input type="radio" name="logo"   /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Flyers & Postar design</td>
            <td><input type="radio" name="fly" /></td>
            <td><input type="radio" name="fly" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Print Media</td>
            <td><input type="radio" name="print" /></td>
            <td><input type="radio" name="print" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Stationery</td>
            <td><input type="radio" name="stationery" /></td>
            <td><input type="radio" name="stationery" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Packaging Design</td>
            <td><input type="radio" name="packaging" /></td>
            <td><input type="radio" name="packaging" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Illustrations</td>
            <td><input type="radio" name="illustration" /></td>
            <td><input type="radio" name="illustration" /></td>
            </tr>

このフォームでは、フォームの上部に2つのラジオボタンがあります。
1）毎日
2）決して。
それで、ユーザーがneverボタン（ラジオボタン）をクリックした場合にすべてのボタン（neverに関連する）を無効にする方法はありますか？これを行うにはどうすればよいですか？

どうもありがとう。

完全なコード..

<?php
include("include/session.php");
include("include/check.php");
include("database/db.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  
/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $_SESSION['uname'] .'s'.  " Profile"; ?></title>
<link rel="stylesheet" type="text/css" href="css/accountpage.css" />
<link rel="stylesheet" type="text/css" href="css/accountpage.css" />
<link rel="stylesheet" type="text/css" href="css/UserAccount.css"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />


<script type="text/javascript">
$('input#never').bind('click', function() {
 $('input.never').attr('disabled', 'disabled');
 $('input.daily').attr('disabled', '');
});
$('input#daily').bind('click', function() {
 $('input.never').attr('disabled', '');
 $('input.daily').attr('disabled', 'disabled');
});

</script>

</head>
<body>
            <div class="AccountSettingmiddle">
            <table width="631">


            <td class="tableHeader">Daily  <input id="daily" type="radio" name="graphics" value="daily" /></td>
            <td class="tableHeader">Never  <input id="never" type="radio" name="graphics" value="never" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Logo Design</td>
            <td><input type="radio" name="logo" value="yes" class="daily"  /></td>
            <td><input type="radio" name="logo" value="no"  class="never"   /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Flyers & Postar design</td>
            <td><input type="radio" name="fly" value="yes" class="daily"  /></td>
            <td><input type="radio" name="fly" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Print Media</td>
            <td><input type="radio" name="print" value="yes" class="daily"  /></td>
            <td><input type="radio" name="print" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Stationery</td>
            <td><input type="radio" name="stationery" value="yes" class="daily"  /></td>
            <td><input type="radio" name="stationery" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Packaging Design</td>
            <td><input type="radio" name="packaging" value="yes" class="daily"   /></td>
            <td><input type="radio" name="packaging" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Illustrations</td>
            <td><input type="radio" name="illustration" value="yes" class="daily"  /></td>
            <td><input type="radio" name="illustration" value="no" class="never" /></td>
            </tr>   

            </table>
            <script type="text/javascript">$(function() {    
$('input#never').bind('click', function() { $('input.never').attr('disabled', 
'disabled'); $('input.daily').attr('disabled', ''); }); $('input#daily').bind('click', 
function() { $('input.never').attr('disabled', ''); $('input.daily').attr('disabled', 
'disabled'); }); }); </script> 

            </div>

</body>
</html>

score 2 · Accepted Answer

最も簡単な方法は、jquery を使用することです。次のように、「決して」に関連するすべての入力にクラスを追加し、「毎日」に関連するすべての入力に別のクラスを追加できます。

<td><input type="radio" name="illustration" class="never" /></td>
<td><input type="radio" name="illustration" class="daily" /></td>

次に、2 つのラジオボタンにクリックハンドラーを追加します。

    <script type="text/javascript">
    $('input#never').bind('click', function() {
     $('input.never').attr('disabled', 'disabled');
     $('input.daily').attr('disabled', '');
    });
    $('input#daily').bind('click', function() {
     $('input.never').attr('disabled', '');
     $('input.daily').attr('disabled', 'disabled');
    });

</script>

もちろん、 to radios に id を追加する必要があります:

Daily  <input id="never" type="radio" name="graphics" value="daily" />
Never  <input id="daily" type="radio" name="graphics" value="never" />

別のオプションは、同じ列の無線のみを更新することですが、柔軟性が低いと思います...

score 0 · Accepted Answer

はい、間違いなく jQuery を使用する方が優れています。

これは、あなたが望むすべてを行うために必要な完全なコードです!

次のソースを使用して、ドキュメントヘッドに jquery の最新コードへの参照を作成します。

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

head自体の別のスクリプトに2つの関数を追加します

function disableAll() {
    $('.radio').each(function(){
        $(this).attr('disabled', 'disabled');
    });
}
function enableAll() {
    $('.radio').each(function(){
        $(this).removeAttr('disabled');
    });
}

そして、あなたのhtmlコードで：

無効/有効にするラジオボタンに radio というクラスを追加します。
Neverラジオボタンのonclick関数をdisableAll（）にする
Dailyラジオボタンのonclick関数をenableAll()にする

それが役立つことを願っています!

score -1 · Accepted Answer

まず、すべてのラジオボタンに id 属性を割り当ててください。

ラジオボタンなしでonclick機能を追加するようになりました..

Never  <input type="radio" name="graphics" id="never" value="never" onclick = "disableOther(this)"/>

今すぐjavascriptを追加してください

選択したラジオボタンをすべて無効にしたい場合

 <script type="text/javascript">
    function disableOther(ele){
       //if never radio button get  checked then 
       if(ele.checked == true){
          //Let we have to disable a radio button with  id gross then
           document.getElementById("gross").disabled = true; 
        } else{
            //Let we have to disable a radio button with  id gross then
           document.getElementById("gross").disabled = false; 
        }    
    }

 </script>

それ以外の場合は、チェックされたすべてのラジオボタンを無効にしたい場合は、ラジオボタンを使用しないでください

<script type="text/javascript">
   function disableOther(ele){
   var radios = document.getElementsByTagName('input');
     for (i = 0; i < radios.length; i++) {
       if (radios[i].type == 'radio' && radios[i].id != "never") {
          var radioid = radios[i].id;             
             if(ele.checked == true){
                  document.getElementById(radioid).disabled = true;
            }else{
                document.getElementById(radioid).disabled = false;
            }                 
         }
       }
   }
</script>

php - HTMLラジオボタンは、Javascriptまたは

3 に答える 3

Related

Reference