How to enable disable sup tag in javascript

Question

i have 2 radio buttons and one text box i need to make(*)appear on the textbox when yes radiobutton is clicked and removed when no radio button is clicked.
my view:

  <label>code<sup id="star" disabled>*</sup></label>             
      >Add to electronic<input type="radio" name="yes" id="yes"/>onchange="starenable()"/><input type="radio" name="yes"
        > id="no"/>onchange="starenable()"/>no

my javascript:

 function starenable() {
        if (document.getElementById('yes').checked) {
            document.getElementById("star").disabled = false;
        } else if (document.getElementById('no').checked) {
            document.getElementById("star").disabled = true;
        }
    }

i tried this but no change in view. any ideas?

prasanth · Answer 1 · 2017-07-07T07:49:29.833

0

Input have disable attribute .Change the sub with input .And align the html code on proper format.Then add the * depend on checked radio button

Updated

note: sub tag not have a disable attribute

function starenable() {
  if (document.getElementById('yes').checked) {
    document.getElementById("star").disabled = false;
  } else if (document.getElementById('no').checked) {
    document.getElementById("star").disabled = true;
  }
  document.getElementById("star").innerHTML = document.getElementById('yes').checked ? '*' : '';
}

<label>code <sub id="star"></sub></label> Add to electronic
<input type="radio" name="yes" id="yes" onchange="starenable()" />yes
<input type="radio" name="yes" id="no" onchange="starenable()"/>no

edited Jul 07 '17 at 07:49

answered Jul 07 '17 at 07:38

prasanth

22,145
4
29
53

i need that * to be displayed out of textbox – Mark Antony Jul 07 '17 at 07:47
why are we giving double quotes to star id? – Mark Antony Jul 07 '17 at 08:10
its default one refer the question https://stackoverflow.com/questions/2373074/single-vs-double-quotes-vs – prasanth Jul 07 '17 at 08:13

score 0 · Answer 2 · answered Jul 07 '17 at 07:42

Here is your solution https://jsfiddle.net/me9uwL2d/

<input type="radio" name="test" value="Yes" />Yes
<input type="radio" name="test" value="No" />No
<input type="text" />

$('input[type="radio"]').change(function() {
    if( $(this).is(':checked') && ($(this).attr('value') == 'Yes')) {
        $('input[type="text"]').val("*");
    }else{
        $('input[type="text"]').val('');
    }
});

score 0 · Answer 3 · answered Jul 07 '17 at 07:49

0

$(document).ready(function() {
    $('input[type=radio][name=yes]').change(function() {
        if (this.id == 'yes') {
         $('#star').hide();
        }
        else if (this.id == 'no') {
            $('#star').show();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>code<span id="star" >*</span></label>             
      Add to electronic
      <input type="radio" name="yes" id="yes"/>yes
      <input type="radio" name="yes"
         id="no"/>no

use this

answered Jul 07 '17 at 07:49

jeevanswamy21

168
11

its working fine here. but in my project its not working? – Mark Antony Jul 07 '17 at 08:08
is their any error is coming or check jquery conflict – jeevanswamy21 Jul 07 '17 at 08:54

score 0 · Answer 4 · answered Jul 07 '17 at 08:03

<label>code<sup id="star" style="visibility:hidden">*</sup></label>
Add to electronic
<input type="radio" name="yes" id="yes" onchange="starenable()"/>yes
<input type="radio" name="yes" id="no" onchange="starenable()"/>no

function starenable() {

    if (document.getElementById('yes').checked)

        document.getElementById("star").style.visibility = "visible";

    else if (document.getElementById('no').checked) 

        document.getElementById("star").style.visibility = "hidden";

    }

How to enable disable sup tag in javascript

4 Answers4