使用 jquery 禁用另一个单选按钮上的单选按钮列

Question

I am new to Jquery,currently working with Sharepoint lists. Here having a situation to disable a radio button column with option selected in another Radio button column. Radio button column1 and Radio button column2 has to two options each. If option 2 selected in Radio button column1 the entire radio button column2 should be disabled. Below is the code I am working on

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
    <script language="JavaScript">
$(document).ready(function() 
{
 $('input[name=Who will be developing the propose site?]').change(function(){
        if($(this).val() == 'Site Adminstrator')
        {
            $('input[name=Has site administrator attest to development operations of Rules of Road]').prop('disabled',true);
        }
        else
        {
            $('input[name=Has site administrator attest to development operations of Rules of Road]').prop('disabled',false);
        }
    });
    });
    </script>

Below is the SharePoint source code for the page (SharePoint list)

<TR><TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">
            <nobr>Who will be developing the propose site?</nobr>
        </H3></TD>
            <TD valign="top" class="ms-formbody" width="400px">
            <!-- FieldName="Who will be developing the propose site?"
                 FieldInternalName="Who_x0020_will_x0020_be_x0020_de"
                 FieldType="SPFieldChoice"
              -->
                <span dir="none"><table cellpadding="0" cellspacing="1">
        <tr>
            <td><span class="ms-RadioText" title="CSMS"><input id="ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00" type="radio" name="ctl00$m$g_7d3ef79b_83fe_4a1f_a469_42a8746f064e$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl00" checked="checked" /><label for="ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00">CSMS</label></span></td>
        </tr><tr>
            <td><span class="ms-RadioText" title="Site Administrator"><input id="ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl01" type="radio" name="ctl00$m$g_7d3ef79b_83fe_4a1f_a469_42a8746f064e$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl01" /><label for="ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl01">Site Administrator</label></span></td>
        </tr>
    </table></span></TD></TR>

            <TR><TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">
            <nobr>Has site administrator attest to development operations of Rules of Road</nobr>
        </H3></TD>
            <TD valign="top" class="ms-formbody" width="400px">
            <!-- FieldName="Has site administrator attest to development operations of Rules of Road"
                 FieldInternalName="Has_x0020_site_x0020_administrat"
                 FieldType="SPFieldChoice"
              -->
                <span dir="none"><table cellpadding="0" cellspacing="1">
        <tr>
            <td><span class="ms-RadioText" title="Yes"><input id="ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00" type="radio" name="ctl00$m$g_7d3ef79b_83fe_4a1f_a469_42a8746f064e$ctl00$ctl04$ctl08$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl00" checked="checked" /><label for="ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00">Yes</label></span></td>
        </tr><tr>
            <td><span class="ms-RadioText" title="No"><input id="ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl01" type="radio" name="ctl00$m$g_7d3ef79b_83fe_4a1f_a469_42a8746f064e$ctl00$ctl04$ctl08$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl01" /><label for="ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl01">No</label></span></td>
        </tr>
    </table></span></TD></TR>

Any help or modifications in code are highly helpful

Kind Regards BK

Answer 1

Here the fiddle: http://jsfiddle.net/gm5N8/

Your code was lightly modified but i have to say that you have crazy names/ids/values. They are terrible. At least you have non-readable names/ids and your values are very strange (like ctl01 or ctl00 ). Hey, make something with them.

Answer 2

If I'm looking at your code correctly the names you're using in jquery don't match the sharepoint autogenerated names for the inputs.

Who will be developing the propose site?

vs

ctl00$m$g_7d3ef79b_83fe_4a1f_a469_42a8746f064e$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$RadioButtons

Otherwise the code looks like it should work.

Here's something that should work:

HTML:

<TR><TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">
        <nobr>Who will be developing the propose site?</nobr>
    </H3></TD>
        <TD valign="top" class="ms-formbody" width="400px">
        <!-- FieldName="Who will be developing the propose site?"
             FieldInternalName="Who_x0020_will_x0020_be_x0020_de"
             FieldType="SPFieldChoice"
          -->
            <span dir="none"><table cellpadding="0" cellspacing="1">
    <tr>
        <td><span class="ms-RadioText" title="CSMS"><input id="g1button1" type="radio" name="group1" value="CSMS" checked="checked" /><label for="g1button1">CSMS</label></span></td>
    </tr><tr>
        <td><span class="ms-RadioText" title="Site Administrator"><input id="g1button2" type="radio" name="group1" value="Site Adminstrator" /><label for="g1button1">Site Administrator</label></span></td>
    </tr>
</table></span></TD></TR>

        <TR><TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">
        <nobr>Has site administrator attest to development operations of Rules of Road</nobr>
    </H3></TD>
        <TD valign="top" class="ms-formbody" width="400px">
        <!-- FieldName="Has site administrator attest to development operations of Rules of Road"
             FieldInternalName="Has_x0020_site_x0020_administrat"
             FieldType="SPFieldChoice"
          -->
            <span dir="none"><table cellpadding="0" cellspacing="1">
    <tr>
        <td><span class="ms-RadioText" title="Yes"><input id="g2button3" type="radio" name="group2" value="ctl00" checked="checked" /><label for="g2button3">Yes</label></span></td>
    </tr><tr>
        <td><span class="ms-RadioText" title="No"><input id="g2button2" type="radio" name="group2" value="ctl01" /><label for="g2button2">No</label></span></td>
    </tr>
</table></span></TD></TR>

Jquery:

$('input[name=group1]').change(function()
{
    if($(this).val() == 'Site Adminstrator')
    {
        $('input[name=group2]').prop('disabled',true);
    }
    else
    {
        $('input[name=group2]').prop('disabled',false);
    }
});

Test it here: http://jsfiddle.net/jL5A5/1/

Answer 3

The below code worked for me. Thanks for all your inputs. could able built on the code for the inputs you provided.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
    <script language="JavaScript">
    $(document).ready(function()
    {
    $('#ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00').attr('disabled', 'disabled');
    $('#ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl01').attr('disabled', 'disabled');
    OnTypeNotificationChange();
     function OnTypeNotificationChange()
    {             
    $('input[name=ctl00$m$g_7d3ef79b_83fe_4a1f_a469_42a8746f064e$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$RadioButtons]').click(function(){

    if($(this).val() == "ctl00")
        {
    $('#ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00').attr('disabled', 'disabled');
    $('#ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl01').attr('disabled', 'disabled');
        }
        else
        {
    $('#ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00').removeAttr('disabled');
    $('#ctl00_m_g_7d3ef79b_83fe_4a1f_a469_42a8746f064e_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl01').removeAttr('disabled');
        }
    });
      }
    });</script>